如何设置手风琴组件指定面板默认打开且支持多面板同时展开

开发者阿泽

2026-10-16

解决方案

1. jQuery UI 相关说明

jQuery UI 的 accordion 组件本身的设计定位就是同一时间仅允许展开一个面板，没有支持多开的配置项，你没有遗漏文档，要实现多开需求用你自己的原生实现更合适。

2. 原生实现的修改方案

你的思路是完全正确的，不需要推翻现有逻辑，只需要做很小的改动即可：

第一步：在HTML中给需要默认展开的面板标题元素添加自定义标记类，比如default-active
第二步：在原有的JS绑定事件逻辑后，新增初始化逻辑，对带标记类的标题执行打开操作即可，和你现有点击逻辑完全一致，不存在反向操作的问题。

示例代码

HTML 改动示例

<!-- 需要默认展开的面板标题加上default-active类 -->
<div class="ols-accordion default-active">默认展开的面板标题</div>
<div class="olsPanel">这里是默认展开的面板内容</div>

<div class="ols-accordion">普通面板标题</div>
<div class="olsPanel">这里是普通面板内容</div>

修改后的JS代码

var acc = document.getElementsByClassName("ols-accordion");
var i;
for (i = 0; i < acc.length; i++) {
    acc[i].addEventListener("click", function () {
        this.classList.toggle("active");
        var olsPanel = this.nextElementSibling;
        if (olsPanel.style.maxHeight) {
            olsPanel.style.maxHeight = null;
        } else {
            olsPanel.style.maxHeight = olsPanel.scrollHeight + "px";
        }
    });
    // 新增初始化逻辑：如果有default-active类，自动触发点击打开
    if(acc[i].classList.contains('default-active')) {
        acc[i].click();
    }
}