本文介绍如何修改 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+，可直接集成至现有项目中。