手风琴菜单

手风琴菜单（Accordion）是一种典型的交互式折叠菜单形式，在导航、侧边栏、常见问题（FAQ）等场景中非常常见。

实现功能

• 点击一级标题，展开对应内容
• 自动收起其他已展开项
• 支持初始默认展开

HTML 结构示例

<div class="accordion">
  <div class="item">
    <h3 class="title">菜单一</h3>
    <div class="content">内容一</div>
  </div>
  <div class="item">
    <h3 class="title">菜单二</h3>
    <div class="content">内容二</div>
  </div>
  <div class="item">
    <h3 class="title">菜单三</h3>
    <div class="content">内容三</div>
  </div>
</div>

jQuery 实现逻辑

$(function () {
  $(".accordion .content").hide(); // 初始化隐藏内容
  $(".accordion .item:first .content").show(); // 默认展开第一项

  $(".accordion .title").click(function () {
    const $content = $(this).next(".content");

    if (!$content.is(":visible")) {
      $(".accordion .content").slideUp();
      $content.slideDown();
    }
  });
});

样式建议

.accordion .title {
  background: #007bff;
  color: white;
  padding: 10px;
  margin: 0;
  cursor: pointer;
}
.accordion .content {
  border: 1px solid #ddd;
  padding: 10px;
  background: #f9f9f9;
}
.accordion .item + .item {
  margin-top: 5px;
}

使用建议

• .title 元素用作点击区域
• .content 区域控制显示内容
• 支持多层嵌套时，需考虑事件委托或结构调整

完整示例代码

loading