请看下面的攻略：

jQuery实现可收缩展开的级联菜单

思路

1.先通过jQuery选择器选中所有菜单项，将其隐藏；

2.再对顶级菜单项添加点击事件，当点击顶级菜单时展开其下面的子菜单项；

3.如果子菜单下又存在下一级子菜单项，那么点击展开该菜单项的时候，应该再展开其下面的子菜单项；

4.在点击菜单项时，要先将其下属的菜单项全部隐藏，再展开当前菜单项对应的子菜单项。

代码实现

1. HTML代码

本次实例中，我们选用如下的HTML代码：

<div class="menu">
  <ul>
    <li><a href="#">一级菜单1</a></li>
    <li>
      <a href="#">一级菜单2</a>
      <ul>
        <li><a href="#">二级菜单1</a></li>
        <li><a href="#">二级菜单2</a></li>
        <li>
          <a href="#">二级菜单3</a>
          <ul>
            <li><a href="#">三级菜单1</a></li>
            <li><a href="#">三级菜单2</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li>
      <a href="#">一级菜单3</a>
      <ul>
        <li><a href="#">二级菜单4</a></li>
        <li><a href="#">二级菜单5</a></li>
      </ul>
    </li>
  </ul>
</div>

2. CSS代码

为了让菜单更易辨识和美观，可以写一些CSS样式。本例代码如下：

/* 清除默认样式 */
*{
  margin: 0;
  padding: 0;
}
/* 一级菜单样式 */
.menu ul>li>a{
  display: block;
  padding: 5px 10px;
  text-decoration: none;
  background-color: #e1e1e1;
  border-bottom: 1px solid #dee1e3;
}
/* 二级菜单样式 */
.menu ul>li>ul>li>a{
  display: block;
  padding: 5px 20px;
  text-decoration: none;
  background-color: #f7f7f7;
}

/* 三级菜单样式 */
.menu ul>li>ul>li>ul>li>a{
  display: block;
  padding: 5px 30px;
  text-decoration: none;
  background-color: #fff;
}

3. jQuery代码

根据前面的思路，我们来写jQuery代码，实现可收缩展开的级联菜单，代码如下：

$(function(){
  // 隐藏所有的菜单子项
  $('.menu ul ul').hide();

  // 点击一级菜单
  $('.menu ul li').click(function(){
    // 如果当前菜单下有二级菜单
    if($(this).children('ul').length>0){
      // 隐藏其他的二级菜单
      $('.menu ul ul').not($(this).children('ul')).hide();
      // 展开或收起当前菜单下的二级菜单
      $(this).children('ul').slideToggle();
      return false;
    }
  });

  // 点击二级菜单
  $('.menu ul li ul li').click(function(){
    // 如果当前菜单下有三级菜单
    if($(this).children('ul').length>0){
      // 隐藏其他的三级菜单
      $('.menu ul ul ul').not($(this).children('ul')).hide();
      // 展开或收起当前菜单下的三级菜单
      $(this).children('ul').slideToggle();
      return false;
    }
  });
});

示例说明

示例一

请看下面的代码，效果图请看右侧：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>示例一：可收缩展开的级联菜单</title>
  <style>
    /* 清除默认样式 */
    *{
      margin: 0;
      padding: 0;
    }
    /* 一级菜单样式 */
    .menu ul>li>a{
      display: block;
      padding: 5px 10px;
      text-decoration: none;
      background-color: #e1e1e1;
      border-bottom: 1px solid #dee1e3;
    }
    /* 二级菜单样式 */
    .menu ul>li>ul>li>a{
      display: block;
      padding: 5px 20px;
      text-decoration: none;
      background-color: #f7f7f7;
    }

    /* 三级菜单样式 */
    .menu ul>li>ul>li>ul>li>a{
      display: block;
      padding: 5px 30px;
      text-decoration: none;
      background-color: #fff;
    }
  </style>
</head>
<body>
  <div class="menu">
    <ul>
      <li><a href="#">一级菜单1</a></li>
      <li>
        <a href="#">一级菜单2</a>
        <ul>
          <li><a href="#">二级菜单1</a></li>
          <li><a href="#">二级菜单2</a></li>
          <li>
            <a href="#">二级菜单3</a>
            <ul>
              <li><a href="#">三级菜单1</a></li>
              <li><a href="#">三级菜单2</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li>
        <a href="#">一级菜单3</a>
        <ul>
          <li><a href="#">二级菜单4</a></li>
          <li><a href="#">二级菜单5</a></li>
        </ul>
      </li>
    </ul>
  </div>
  <script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
  <script>
    $(function(){
      // 隐藏所有的菜单子项
      $('.menu ul ul').hide();

      // 点击一级菜单
      $('.menu ul li').click(function(){
        // 如果当前菜单下有二级菜单
        if($(this).children('ul').length>0){
          // 隐藏其他的二级菜单
          $('.menu ul ul').not($(this).children('ul')).hide();
          // 展开或收起当前菜单下的二级菜单
          $(this).children('ul').slideToggle();
          return false;
        }
      });

      // 点击二级菜单
      $('.menu ul li ul li').click(function(){
        // 如果当前菜单下有三级菜单
        if($(this).children('ul').length>0){
          // 隐藏其他的三级菜单
          $('.menu ul ul ul').not($(this).children('ul')).hide();
          // 展开或收起当前菜单下的三级菜单
          $(this).children('ul').slideToggle();
          return false;
        }
      });
    });
  </script>
</body>
</html>

示例二

请看下面的代码，效果图请看右侧：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>示例二：级联菜单自动展开</title>
  <style>
    /* 清除默认样式 */
    *{
      margin: 0;
      padding: 0;
    }
    /* 一级菜单样式 */
    .menu ul>li>a{
      display: block;
      padding: 5px 10px;
      text-decoration: none;
      background-color: #e1e1e1;
      border-bottom: 1px solid #dee1e3;
    }
    /* 二级菜单样式 */
    .menu ul>li>ul>li>a{
      display: block;
      padding: 5px 20px;
      text-decoration: none;
      background-color: #f7f7f7;
    }

    /* 三级菜单样式 */
    .menu ul>li>ul>li>ul>li>a{
      display: block;
      padding: 5px 30px;
      text-decoration: none;
      background-color: #fff;
    }
  </style>
</head>
<body>
  <div class="menu">
    <ul>
      <li><a href="#">一级菜单1</a></li>
      <li>
        <a href="#">一级菜单2</a>
        <ul>
          <li><a href="#">二级菜单1</a></li>
          <li><a href="#">二级菜单2</a></li>
          <li>
            <a href="#">二级菜单3</a>
            <ul>
              <li><a href="#">三级菜单1</a></li>
              <li><a href="#">三级菜单2</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li>
        <a href="#">一级菜单3</a>
        <ul>
          <li><a href="#">二级菜单4</a></li>
          <li><a href="#">二级菜单5</a></li>
        </ul>
      </li>
    </ul>
  </div>
  <script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
  <script>
    $(function(){
      // 第一个菜单自动展开
      $('.menu ul li:first-child ul').slideDown();

      // 点击一级菜单
      $('.menu ul li').click(function(){
        // 如果当前菜单下有子菜单，则展开
        if($(this).children('ul').length>0){
          // 隐藏其他的子菜单
          $('.menu ul ul').not($(this).children('ul')).hide();
          // 展开或收起子菜单
          $(this).children('ul').slideToggle();
          return false;
        }
      });
    });
  </script>
</body>
</html>

以上就是本次可收缩展开的级联菜单实例代码的详细攻略。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery实现可收缩展开的级联菜单实例代码 - Python技术站

jQuery实现可收缩展开的级联菜单实例代码