如何为独立开关的jQuery Accordion实现全部展开/折叠功能？

核心思路 #

你的问题根源在于：当手风琴设置为允许独立开关（collapsible: true+active: false）时，手动打开的节点会被jQuery UI Accordion标记为「手动激活」，直接调用accordion("option", "active", false)无法触发这类节点的折叠。解决方案是通过触发面板头部的原生点击事件，让组件自行处理状态更新，同时无需大幅修改原有HTML结构。

具体实现代码 #

1. 初始化支持独立开关的手风琴

确保初始化配置开启可折叠且允许多面板同时激活：

$("#accordion").accordion({
  collapsible: true,
  active: false, // 初始全部折叠
  heightStyle: "content"
});

2. 实现「全部折叠」功能

$("#collapse-all").on("click", function() {
  $("#accordion .ui-accordion-header").each(function() {
    // 仅对已展开的面板触发折叠
    if ($(this).hasClass("ui-accordion-header-active")) {
      $(this).click();
    }
  });
});

3. 实现「全部展开」功能

$("#expand-all").on("click", function() {
  $("#accordion .ui-accordion-header").each(function() {
    // 仅对已折叠的面板触发展开
    if (!$(this).hasClass("ui-accordion-header-active")) {
      $(this).click();
    }
  });
});

4. 可选：一键切换全部展开/折叠

如果需要一个按钮切换两种状态：

$("#toggle-all").on("click", function() {
  // 判断当前是否存在展开的面板
  var hasActivePanel = $("#accordion .ui-accordion-header-active").length > 0;
  
  $("#accordion .ui-accordion-header").each(function() {
    if (hasActivePanel) {
      // 存在展开面板：折叠所有激活项
      $(this).hasClass("ui-accordion-header-active") && $(this).click();
    } else {
      // 全折叠状态：展开所有面板
      !$(this).hasClass("ui-accordion-header-active") && $(this).click();
    }
  });
});

无需大幅修改HTML的说明 #

只需要在页面中添加对应的按钮元素即可（比如<button id="collapse-all">全部折叠</button>），完全不需要改动原有的手风琴DOM结构，所有操作都基于jQuery UI Accordion的原生类名和事件机制。

注意事项 #

• 不要直接修改.ui-accordion-content的display属性，这会导致组件内部状态与DOM显示不一致，后续操作会出现异常。
• 必须通过触发面板头部的点击事件来切换状态，确保jQuery UI自动更新组件的类名和内部状态。

内容的提问来源于stack exchange，提问作者user5853892