菜鸟教程
教程 jquery tutorial

手风琴菜单

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

实现功能

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

HTML 结构示例

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 实现逻辑

js 
$(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();
    }
  });
});

样式建议

css 
.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 区域控制显示内容
  • 支持多层嵌套时，需考虑事件委托或结构调整

完整示例代码

在线代码演示
源码 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<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">内容三：支持任何 HTML 内容。</div>
  </div>
</div>

<script>
$(function () {
$(".accordion .content").hide();
$(".accordion .item:first .content").show();


$(&quot;.accordion .title&quot;).click(function () {
  const $content = $(this).next(&quot;.content&quot;);
  if (!$content.is(&quot;:visible&quot;)) {
    $(&quot;.accordion .content&quot;).slideUp();
    $content.slideDown();
  }
});



});
</script>

相关内容