当前位置：首页 > jquery

jquery折叠菜单

2026-03-16 17:23:00jquery

jQuery 折叠菜单实现方法

使用 jQuery 实现折叠菜单可以通过操作 DOM 元素的显示和隐藏来完成。以下是几种常见的实现方式：

基础折叠效果

通过 slideToggle() 方法实现平滑的展开/折叠动画效果：

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

带有图标的折叠菜单

添加箭头图标表示状态变化：

$('.menu-header').click(function() {
  $(this).find('.arrow').toggleClass('down');
  $(this).next('.menu-content').slideToggle();
});

CSS 部分：

.arrow {
  transition: transform 0.3s;
}
.arrow.down {
  transform: rotate(90deg);
}

手风琴式菜单

确保每次只展开一个菜单项：

$('.menu-header').click(function() {
  $('.menu-content').slideUp();
  $(this).next('.menu-content').slideDown();
});

完整示例代码

HTML 结构：

<div class="accordion">
  <div class="menu-item">
    <div class="menu-header">菜单1</div>
    <div class="menu-content">
      <p>内容1</p>
    </div>
  </div>
  <div class="menu-item">
    <div class="menu-header">菜单2</div>
    <div class="menu-content">
      <p>内容2</p>
    </div>
  </div>
</div>

jQuery 代码：

$(document).ready(function() {
  $('.menu-content').hide();

  $('.menu-header').click(function() {
    $(this).next('.menu-content').slideToggle(200);
    $(this).toggleClass('active');
  });
});

CSS 样式：

jquery折叠菜单

.menu-header {
  padding: 10px;
  background: #f5f5f5;
  cursor: pointer;
  border: 1px solid #ddd;
}
.menu-header.active {
  background: #e5e5e5;
}
.menu-content {
  padding: 15px;
  border: 1px solid #ddd;
  border-top: none;
}