编程 Javascript

jQuery+CSS实现简单切换菜单示例

Posted in Javascript onJuly 27, 2016

本文实例讲述了jQuery+CSS实现简单切换菜单的方法。分享给大家供大家参考，具体如下：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题页</title>
<script src="jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
     $(function(){
       toggleEvent(0);
       var mTitle = $(".menuTitle");
       mTitle.each(function(i){
        $(this).click(function(){
         toggleSlideEvent(i);
         $(this).css("border-bottom","1px #ccccff solid");
        });
       });
     });
     function toggleSlideEvent(i)
     {
      $("ul",".menu1").css("display","none");
      $("ul",".menu1").eq(i).slideDown();
      $(".menuTitle").each(function(){
        $(this).css("border-bottom","0px #ccccff solid");
      });
     }
     function toggleEvent(i)
     {
      $("ul",".menu1").css("display","none");
      $("ul",".menu1").eq(i).css("display","block");
      $(".menuTitle").eq(i).css("border-bottom","1px #ccccff solid");
     }
  </script>
  <style type="text/css">
    .menu1
    {
      border: 1px #CCCCFF solid;
      border-top: 0px;
      width: 160px;
    }
    .menuTitle
    {
      width: 100%;
      height: 26px;
      border-bottom: 0px #CCCCFF solid;
      border-top: 1px #CCCCFF solid;
      text-align: left;
      line-height: 26px;
      cursor: pointer;
    }
    ul
    {
      border: 0px #CCCCFF solid;
      width: 100%;
      margin-left: 0px;
      margin-top: 0px;
    }
    ul li
    {
      height: 36px;
      line-height:36px;
      border: 0px gray solid;
      margin-top: 0px;
      margin-left: 0px;
      padding-left:20px;
      list-style-type:none;
      /*background:url(images/Title.png);*/
    }
    ul li:hover
    {
      height: 36px;
      line-height:36px;
      border: 0px gray solid;
      margin-top: 0px;
      margin-left: 0px;
      padding-left:20px;
      list-style-type:none;
      /*background:url(images/Title.png);*/
      cursor:pointer;
    }
  </style>
</head>
<body>
  <form id="form1" runat="server">
  <div class="menu1">
    <div class="menuTitle">
      TITLE1</div>
    <ul>
      <li>Menu1</li>
      <li>Menu2</li>
      <li>Menu3</li>
      <li>Menu4</li>
      <li>Menu5</li>
    </ul>
    <div class="menuTitle">
      TITLE2</div>
    <ul>
      <li>Menu1</li>
      <li>Menu2</li>
      <li>Menu3</li>
      <li>Menu4</li>
      <li>Menu5</li>
    </ul>
    <div class="menuTitle">
      TITLE3</div>
    <ul>
      <li>Menu1</li>
      <li>Menu2</li>
      <li>Menu3</li>
      <li>Menu4</li>
      <li>Menu5</li>
    </ul>
  </div>
  </form>
</body>
</html>

希望本文所述对大家jQuery程序设计有所帮助。

- Author -

ajunfly

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

HTML代码中标签的全部属性中文注释说明

Mar 26 Javascript

js 表格隔行颜色

Dec 02 Javascript

JQuery遍历元素的后代和同胞实现方法

Sep 18 Javascript

用JavaScript和jQuery实现瀑布流

Mar 19 Javascript

javascript中json对象json数组json字符串互转及取值方法

Apr 19 Javascript

基于Vue的文字跑马灯组件(npm 组件包)

May 24 Javascript

基于Vue的移动端图片裁剪组件功能

Nov 28 Javascript

JS实现图片旋转动画效果封装与使用示例

Jul 09 Javascript

vue-router实现嵌套路由的讲解

Jan 19 Javascript

Bootstrap实现省市区三级联动(亲测可用)

Jul 26 Javascript

JavaScript实现网页动态生成表格

Nov 25 Javascript

7个你应该知道的JS原生错误类型

Apr 29 Javascript

AngularJS 指令详细介绍

Jul 27 #Javascript

js中遍历Map对象的方法

Jul 27 #Javascript

angular.js分页代码的实例

Jul 27 #Javascript

jQuery基于函数重载实现自定义Alert函数样式的方法

Jul 27 #Javascript

jquery动态遍历Json对象的属性和值的方法

Jul 27 #Javascript

移动端翻页插件dropload.js（支持Zepto和jQuery）

Jul 27 #Javascript

js中遍历对象的属性和值的方法

Jul 27 #Javascript