jquery实现可点击伸缩与展开的菜单效果代码-前端开发

这里简单讲解一下如何使用jQuery实现可点击伸缩与展开的菜单效果。

这里简单讲解一下如何使用jQuery实现可点击伸缩与展开的菜单效果。

概述

这里将展示如何通过jQuery来实现一个可点击伸缩与展开的菜单效果，步骤如下：

HTML结构：设置菜单的HTML结构，包含一级菜单和二级菜单。
CSS样式：设置菜单的样式，使之具备可伸缩和展开的效果。
jQuery脚本：通过jQuery脚本来实现菜单的点击伸缩与展开效果。

HTML结构

首先先来看一下需要实现的HTML结构，如下所示：

<div class="menu">
  <ul>
    <li><a href="#">菜单1</a>
      <ul>
        <li><a href="#">子菜单1-1</a></li>
        <li><a href="#">子菜单1-2</a></li>
      </ul>
    </li>
    <li><a href="#">菜单2</a>
      <ul>
        <li><a href="#">子菜单2-1</a></li>
        <li><a href="#">子菜单2-2</a></li>
      </ul>
    </li>
  </ul>            
</div>

这里我们采用ul和li的层级嵌套方式来实现菜单的伸缩与展开。

CSS样式

接下来先给菜单设置一些基本样式，再添加一些控制展开和收缩的样式。如下所示：

.menu ul{
  list-style:none;
  margin:0;
  padding:0;
}
/* 一级菜单 */
.menu > ul > li{
  position:relative;
  margin-bottom:1px;
  background:#eee;
}
/* 二级菜单 */
.menu ul ul{
  display:none;
}
.menu ul li ul li{
  background:#fff;
}
/* 控制展开和收缩的样式 */
.submenu-open:before{
  content: "-";
}
.submenu-closed:before{
  content: "+";
}

这里先设置了一级菜单和二级菜单的样式，以及控制展开和收缩的样式。其中，通过:before伪元素来控制‘-’和"+"的显示。

jQuery脚本

这是关键部分了，下面就来介绍如何通过jQuery脚本实现可点击伸缩与展开的菜单效果。如下所示：

$(function(){
  $('.menu li:has(ul)').addClass('submenu-closed').on('click', function(e) {
    e.stopPropagation();
    $(this).toggleClass('submenu-open').children('ul').slideToggle();
  });
});

这里采用了事件委托的方式来监听li元素的点击事件，其中surround元素为class为menu的元素，语法为$('.menu')。通过获得点击的元素的子类来进行下一步操作。

示例说明

示例1

通过一个简单的示例来看一下具体的效果。首先，我们加入一个HTML文档，并引入jQuery库。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>jQuery菜单效果</title>
  <style>
    .menu ul{
      list-style:none;
      margin:0;
      padding:0;
    }
    .menu > ul > li{
      position:relative;
      margin-bottom:1px;
      background:#eee;
    }
    .menu ul ul{
      display:none;
    }
    .menu ul li ul li{
      background:#fff;
    }
    .submenu-open:before{
      content: "-";
    }
    .submenu-closed:before{
      content: "+";
    }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script>
    $(function(){
      $('.menu li:has(ul)').addClass('submenu-closed').on('click', function(e) {
        e.stopPropagation();
        $(this).toggleClass('submenu-open').children('ul').slideToggle();
      });
    });
  </script>
</head>
<body>
  <div class="menu">
    <ul>
      <li><a href="#">菜单1</a>
        <ul>
          <li><a href="#">子菜单1-1</a></li>
          <li><a href="#">子菜单1-2</a></li>
        </ul>
      </li>
      <li><a href="#">菜单2</a>
        <ul>
          <li><a href="#">子菜单2-1</a></li>
          <li><a href="#">子菜单2-2</a></li>
        </ul>
      </li>
    </ul>            
  </div>
</body>
</html>

示例2

接下来为了证明示例1的正确运行，将增加一个更加复杂的菜单，包含多级伸缩和展开菜单。如下所示：

<div class="menu">
  <ul>
    <li><a href="#">菜单1</a>
      <ul>
        <li><a href="#">子菜单1-1</a></li>
        <li><a href="#">子菜单1-2</a></li>
        <li><a href="#">子菜单1-3+</a>
          <ul>
            <li><a href="#">子菜单1-3-1</a></li>
            <li><a href="#">子菜单1-3-2</a></li>
            <li><a href="#">子菜单1-3-3+</a>
              <ul>
                <li><a href="#">子菜单1-3-3-1</a></li>
                <li><a href="#">子菜单1-3-3-2</a></li>
                <li><a href="#">子菜单1-3-3-3+</a>
                  <ul>
                    <li><a href="#">子菜单1-3-3-3-1</a></li>
                    <li><a href="#">子菜单1-3-3-3-2</a></li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="#">菜单2+</a>
      <ul>
        <li><a href="#">子菜单2-1</a></li>
        <li><a href="#">子菜单2-2</a></li>
        <li><a href="#">子菜单2-3+</a>
          <ul>
            <li><a href="#">子菜单2-3-1</a></li>
            <li><a href="#">子菜单2-3-2</a></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>            
</div>

同样的操作，将其包含进示例1中，结果如下所示：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>jQuery菜单效果</title>
  <style>
    .menu ul{
      list-style:none;
      margin:0;
      padding:0;
    }
    .menu > ul > li{
      position:relative;
      margin-bottom:1px;
      background:#eee;
    }
    .menu ul ul{
      display:none;
    }
    .menu ul li ul li{
      background:#fff;
    }
    .submenu-open:before{
      content: "-";
    }
    .submenu-closed:before{
      content: "+";
    }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script>
    $(function(){
      $('.menu li:has(ul)').addClass('submenu-closed').on('click', function(e) {
        e.stopPropagation();
        $(this).toggleClass('submenu-open').children('ul').slideToggle();
      });
    });
  </script>
</head>
<body>
  <div class="menu">
    <ul>
      <li><a href="#">菜单1</a>
        <ul>
          <li><a href="#">子菜单1-1</a></li>
          <li><a href="#">子菜单1-2</a></li>
          <li><a href="#">子菜单1-3+</a>
            <ul>
              <li><a href="#">子菜单1-3-1</a></li>
              <li><a href="#">子菜单1-3-2</a></li>
              <li><a href="#">子菜单1-3-3+</a>
                <ul>
                  <li><a href="#">子菜单1-3-3-1</a></li>
                  <li><a href="#">子菜单1-3-3-2</a></li>
                  <li><a href="#">子菜单1-3-3-3+</a>
                    <ul>
                      <li><a href="#">子菜单1-3-3-3-1</a></li>
                      <li><a href="#">子菜单1-3-3-3-2</a></li>
                    </ul>
                  </li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </li>
      <li><a href="#">菜单2+</a>
        <ul>
          <li><a href="#">子菜单2-1</a></li>
          <li><a href="#">子菜单2-2</a></li>
          <li><a href="#">子菜单2-3+</a>
            <ul>
              <li><a href="#">子菜单2-3-1</a></li>
              <li><a href="#">子菜单2-3-2</a></li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>            
  </div>
</body>
</html>