jQuery Accordion

手风琴（Accordion）是一种"多个面板一次只展开一个"的折叠菜单，常见于 FAQ、侧边栏分类、帮助中心。它能有效节省页面空间，用 jQuery 的 slide 动画几十行即可实现，也能直接用 jQuery UI 现成的 accordion 组件。本节先讲原理，再把它封装成可复用的 $.fn.accordion 插件。

1. 页面结构

先搭好 HTML 与最小 CSS：每个面板由标题 h3 与内容区 .body 组成，初始全部收起：

<style>
.acc { width: 340px; }
.acc h3 { margin: 0; padding: 8px; background: #eee; cursor: pointer; }
.acc .body { display: none; padding: 10px; border: 1px solid #ccc; }
</style>
<div class="acc">
  <h3>jQuery 是什么</h3>
  <div class="body">jQuery 是一个快速小巧的 JavaScript 库。</div>
  <h3>为什么要学 jQuery</h3>
  <div class="body">选择器、动画、AJAX 都更简洁高效。</div>
</div>

2. 展开与收起逻辑

点标题时：本面板内容滑开/收起，兄弟面板的内容全部收起：

$(".acc h3").click(function () {
  var $next = $(this).next(".body");                 // 本面板内容区
  $next.stop().slideToggle(200);                     // 自身展开或收起
  $(this).siblings(".body").not($next).stop().slideUp(200);  // 收起其它面板
});
// 效果：点"jQuery 是什么"展开第一块；再点"为什么要学 jQuery"时，
// 第二块展开、第一块自动收起——同一时刻只展开一个面板

3. 封装成 $.fn.accordion 插件

把逻辑封装为插件并支持选项，页面里只需一行初始化。标准插件写法：$.extend 合并默认选项、return this 支持链式调用：

$.fn.accordion = function (options) {
  options = $.extend({ speed: 200 }, options);
  this.find("h3").click(function () {
    var $next = $(this).next(".body");
    $next.stop().slideToggle(options.speed);
    $(this).siblings(".body").not($next).stop().slideUp(options.speed);
  });
  return this;
};

$(".acc").accordion({ speed: 300 });
// 效果：与第 2 节一致，但页面中任意多个 .acc 容器都只需一行初始化

4. 常用变体与现成组件

• 默认展开第一项：HTML 中给第一个 .body 去掉 display:none，或初始化后触发一次 click；
• 只开不关：把 slideToggle 换成 slideDown，任何时刻都可多面板展开；
• 生产项目推荐 jQuery UI：$("#acc").accordion({ collapsible: true })，自带键盘操作与 ARIA 无障碍支持，不必自己处理动画细节。

5. 性能注意

• 快速连点时用 .stop() 清空动画队列，避免面板"卡在半开"；
• 内容多、面板多时优先 display 切换（show/hide）而非滑动动画，减少重排开销。

小结

手风琴的核心是"展开自身、收起兄弟"，配合 stop() 防止动画排队；封装为 $.fn.accordion 后可处处复用，追求无障碍与省心时直接用 jQuery UI 的 accordion 更佳。