当前位置：首页 > jquery

jquery折叠菜单

2026-04-08 14:12:04jquery

使用 jQuery 实现折叠菜单

HTML 结构

<div class="menu">
  <div class="menu-item">
    <div class="menu-header">菜单标题 1</div>
    <div class="menu-content">
      <a href="#">子菜单 1</a>
      <a href="#">子菜单 2</a>
    </div>
  </div>
  <div class="menu-item">
    <div class="menu-header">菜单标题 2</div>
    <div class="menu-content">
      <a href="#">子菜单 3</a>
      <a href="#">子菜单 4</a>
    </div>
  </div>
</div>

CSS 样式

.menu-content {
  display: none;
  padding: 10px;
}
.menu-header {
  cursor: pointer;
  padding: 10px;
  background-color: #f0f0f0;
}
.menu-header:hover {
  background-color: #e0e0e0;
}

jQuery 代码

$(document).ready(function() {
  $('.menu-header').click(function() {
    $(this).next('.menu-content').slideToggle();
  });
});

实现多级折叠菜单

HTML 结构

<div class="multi-menu">
  <div class="menu-item">
    <div class="menu-header">父菜单 1</div>
    <div class="menu-content">
      <div class="menu-item">
        <div class="menu-header">子菜单 1</div>
        <div class="menu-content">
          <a href="#">选项 1</a>
          <a href="#">选项 2</a>
        </div>
      </div>
    </div>
  </div>
</div>

jQuery 代码

$(document).ready(function() {
  $('.multi-menu .menu-header').click(function(e) {
    e.stopPropagation();
    $(this).next('.menu-content').slideToggle();
  });
});

添加展开/折叠图标

HTML 修改

<div class="menu-header">
  菜单标题
  <span class="menu-icon">+</span>
</div>

jQuery 修改

$(document).ready(function() {
  $('.menu-header').click(function() {
    $(this).next('.menu-content').slideToggle();
    $(this).find('.menu-icon').text(function(_, text) {
      return text === '+' ? '-' : '+';
    });
  });
});

实现手风琴效果

jQuery 代码

jquery折叠菜单

$(document).ready(function() {
  $('.menu-header').click(function() {
    $(this).next('.menu-content').slideToggle();
    $(this).parent().siblings().find('.menu-content').slideUp();
  });
});