JQuery实现折叠式菜单的详细代码

下面是 JQuery 实现折叠式菜单的详细攻略：

1. HTML 结构

首先需要在 HTML 中创建一些元素来组成折叠式菜单，例如：

<div class="menu">
  <div class="menu-item">
    <div class="menu-title">选项1</div>
    <ul class="submenu">
      <li>子选项1</li>
      <li>子选项2</li>
      <li>子选项3</li>
    </ul>
  </div>
  <div class="menu-item">
    <div class="menu-title">选项2</div>
    <ul class="submenu">
      <li>子选项1</li>
      <li>子选项2</li>
      <li>子选项3</li>
    </ul>
  </div>
  <div class="menu-item">
    <div class="menu-title">选项3</div>
    <ul class="submenu">
      <li>子选项1</li>
      <li>子选项2</li>
      <li>子选项3</li>
    </ul>
  </div>
</div>

其中，.menu 是整个折叠式菜单的容器，.menu-item 表示每一个选项，.menu-title 是选项的标题，.submenu 是子菜单的容器，子菜单默认是隐藏的。

2. CSS 样式

为了让折叠式菜单看起来更好看，可以添加一些 CSS 样式，例如：

.menu {
  border: 1px solid #ccc;
  background: #f6f6f6;
  padding: 10px;
}

.menu-item {
  margin-bottom: 10px;
}

.menu-title {
  color: #333;
  font-weight: bold;
  cursor: pointer;
}

.submenu {
  display: none;
  margin: 0;
  padding: 0;
}

.submenu li {
  list-style: none;
  background: #f6f6f6;
  padding: 5px 10px;
  cursor: pointer;
}

.submenu li:hover {
  background: #e3e3e3;
}

3. JQuery 代码

最后是关键的 JQuery 代码部分。为了实现折叠效果，需要使用 .slideToggle() 函数，在标题上添加点击事件，当点击时子菜单就会展开或收起。

$(document).ready(function() {
  $('.menu-title').click(function() {
    $(this).siblings('.submenu').slideToggle();
  });
});

上述代码中，$(document).ready() 函数用来确保页面加载完后执行代码，.menu-title 表示选项的标题，$(this).siblings('.submenu') 表示选项的子菜单，.slideToggle() 函数用来展开或收起子菜单。

这里再展示两个示例：

示例一

页面上只有一个折叠式菜单。HTML 结构如下：

<div class="menu">
  <div class="menu-item">
    <div class="menu-title">选项1</div>
    <ul class="submenu">
      <li>子选项1</li>
      <li>子选项2</li>
      <li>子选项3</li>
    </ul>
  </div>
</div>

这时只需要使用上面的 JQuery 代码就能够实现折叠效果了。

示例二

页面上有多个折叠式菜单，每个菜单都有自己的标题和子菜单。HTML 结构如下：

<div class="menu">
  <div class="menu-item">
    <div class="menu-title">选项1</div>
    <ul class="submenu">
      <li>子选项1</li>
      <li>子选项2</li>
      <li>子选项3</li>
    </ul>
  </div>
  <div class="menu-item">
    <div class="menu-title">选项2</div>
    <ul class="submenu">
      <li>子选项1</li>
      <li>子选项2</li>
      <li>子选项3</li>
    </ul>
  </div>
  <div class="menu-item">
    <div class="menu-title">选项3</div>
    <ul class="submenu">
      <li>子选项1</li>
      <li>子选项2</li>
      <li>子选项3</li>
    </ul>
  </div>
</div>
<div class="menu">
  <div class="menu-item">
    <div class="menu-title">选项4</div>
    <ul class="submenu">
      <li>子选项1</li>
      <li>子选项2</li>
      <li>子选项3</li>
    </ul>
  </div>
  <div class="menu-item">
    <div class="menu-title">选项5</div>
    <ul class="submenu">
      <li>子选项1</li>
      <li>子选项2</li>
      <li>子选项3</li>
    </ul>
  </div>
  <div class="menu-item">
    <div class="menu-title">选项6</div>
    <ul class="submenu">
      <li>子选项1</li>
      <li>子选项2</li>
      <li>子选项3</li>
    </ul>
  </div>
</div>

这时需要对 JQuery 代码做一些修改，使得它能够针对每一个菜单都有效。代码如下：

$(document).ready(function() {
  $('.menu-title').click(function() {
    $(this).closest('.menu-item').find('.submenu').slideToggle();
  });
});

其中，$(this).closest('.menu-item') 表示当前标题所在的选项，.find('.submenu') 表示选项的子菜单。

这样就实现了多个折叠式菜单的效果。