本文介绍如何修改 jquery 手风琴代码，使其支持“单开模式”：点击任一标题时，若其他面板已展开，则先收起所有面板，再展开当前项，避免多面板同时打开。
本文介绍如何修改 jquery 手风琴代码，使其支持“单开模式”：点击任一标题时，若其他面板已展开，则先收起所有面板，再展开当前项，避免多面板同时打开。
要实现手风琴（Accordion）的单开效果（即同一时间仅允许一个面板展开），关键在于：每次点击标题时，先统一收起所有已展开的面板，再针对当前点击项执行展开逻辑。原始代码使用 slideToggle() 仅控制单个面板，无法协调多个面板的状态，因此需重构事件处理逻辑。
以下是优化后的 jQuery 实现：
jQuery(function ($) {
$(".head").on("click", function () {
const $this = $(this);
const $accordion = $this.parent();
const isActive = $this.hasClass("active");
// 步骤1：全局重置 — 收起所有面板、移除 active 状态和箭头动画类
$(".head").removeClass("active");
$(".content").slideUp(280);
$(".arrow").removeClass("arrow-animate");
// 步骤2：仅对当前项执行展开操作（仅当它原本未激活时）
if (!isActive) {
$this.addClass("active");
$accordion.find(".arrow").addClass("arrow-animate");
$accordion.find(".content").slideDown(280);
}
});
});✅ 关键改进说明：
jQuery 1.12.4
下载
jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。
- 使用 slideUp(280) 和 slideDown(280) 替代 slideToggle()，确保行为可预测；
- 统一操作所有 .head、.content 和 .arrow 元素，打破彼此状态耦合；
- 通过 if (!isActive) 判断避免重复展开或误触发，提升交互稳定性；
- $this 缓存与 $(this).parent() 显式定位，增强代码可读性与性能。
⚠️ 注意事项：
- 确保所有 .accordion 结构一致（即每个 .head 后紧跟 .content，且 .arrow 位于 .head 内部），否则 find() 可能失效；
- 若页面存在多个独立手风琴组（如分属不同 ID 容器），建议为每组添加唯一父级标识，并将选择器限定作用域（例如 $("#accordion-1 .head")），避免跨组干扰；
- 动画时间 280 毫秒可按需统一调整，建议保持 slideUp/slideDown 参数一致以保证视觉连贯性。
该方案简洁可靠，无需引入第三方插件，兼容 jQuery 1.7+，可直接集成至现有项目中。
