jquery二级折叠菜单代码

要创建一个二级折叠菜单，我们可以使用jQuery来简化DOM操作和事件处理，二级折叠菜单通常用于网站导航，允许用户点击一级菜单项时展开或折叠二级菜单项，下面是一个简单的实现方法，包括HTML结构、CSS样式和jQuery脚本。

HTML结构

我们需要定义菜单的HTML结构，这里是一个基本的二级菜单示例：

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

CSS样式

我们需要为菜单添加一些基本的CSS样式，以确保它看起来整洁并且功能正常。

.menu ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
.menu li {
  position: relative;
}
.menu a {
  display: block;
  padding: 10px;
  background-color: #f2f2f2;
  text-decoration: none;
  color: #333;
}
.menu ul.submenu {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
  background-color: #fff;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.menu ul.submenu li a {
  padding-left: 20px;
  background-color: #e9e9e9;
}
.menu ul.submenu li:hover a {
  background-color: #d0d0d0;
}

jQuery脚本

我们需要编写jQuery脚本来处理点击事件，以展开和折叠二级菜单。

$(document).ready(function() {
  // 绑定点击事件到主菜单项
  $('.menu > ul > li > a').click(function(e) {
    e.preventDefault(); // 阻止默认的链接行为
    var submenu = $(this).siblings('.submenu'); // 获取当前主菜单项的子菜单
    if (submenu.is(':visible')) {
      submenu.slideUp(); // 如果子菜单是可见的，则滑上去隐藏
    } else {
      // 如果子菜单不可见，则隐藏其他所有子菜单，并显示当前子菜单
      $('.menu ul.submenu').slideUp();
      submenu.slideDown();
    }
  });
});

这段代码首先等待DOM加载完成，然后为每个主菜单项的链接绑定点击事件，当点击主菜单项时，它会检查相应的子菜单是否可见，如果可见，就将其隐藏；如果不可见，就先隐藏所有其他子菜单，然后显示当前的子菜单。