# 手风琴菜单

URL: https://caijiao.org/jquery/08-projects/03-accordion
Source: docs/jquery/08-projects/03-accordion.md
Description: 本文演示如何使用 jQuery 实现手风琴菜单效果，适用于导航栏、FAQ 切换等场景，支持点击展开/折叠，提高用户交互体验。

手风琴菜单（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` 区域控制显示内容
- 支持多层嵌套时，需考虑事件委托或结构调整

## 完整示例代码

[在线代码演示](/jquery/demos/28.html)