如何实现Bootstrap accordion手风琴组件默认处于折叠状态

核心需求 #

• 保留手风琴单面板切换展开/折叠的原生交互
• 不需要添加一键折叠/展开所有面板的额外控制按钮
• 页面首次加载完成时，所有手风琴面板默认处于折叠关闭状态

实现代码 #

直接按照Bootstrap原生accordion规范调整初始属性即可，不需要额外写JS控制：

<div class="accordion" id="pageAccordion">
  <!-- 面板项1 -->
  <div class="accordion-item">
    <h2 class="accordion-header" id="panelHead1">
      <button 
        class="accordion-button collapsed" 
        type="button" 
        data-bs-toggle="collapse" 
        data-bs-target="#panelContent1" 
        aria-expanded="false"
        aria-controls="panelContent1"
      >
        面板1标题
      </button>
    </h2>
    <div 
      id="panelContent1" 
      class="accordion-collapse collapse" 
      aria-labelledby="panelHead1"
      data-bs-parent="#pageAccordion"
    >
      <div class="accordion-body">
        面板1对应的具体内容
      </div>
    </div>
  </div>

  <!-- 面板项2 可按相同结构追加多个面板 -->
  <div class="accordion-item">
    <h2 class="accordion-header" id="panelHead2">
      <button 
        class="accordion-button collapsed" 
        type="button" 
        data-bs-toggle="collapse" 
        data-bs-target="#panelContent2" 
        aria-expanded="false"
        aria-controls="panelContent2"
      >
        面板2标题
      </button>
    </h2>
    <div 
      id="panelContent2" 
      class="accordion-collapse collapse" 
      aria-labelledby="panelHead2"
      data-bs-parent="#pageAccordion"
    >
      <div class="accordion-body">
        面板2对应的具体内容
      </div>
    </div>
  </div>
</div>

关键配置注意点 #

• 所有面板的标题触发按钮必须添加collapsed类，同时设置aria-expanded="false"，匹配初始折叠的状态标识
• 所有面板的内容容器（带accordion-collapse类的元素）不要添加show类，Bootstrap默认会给带show类的折叠项设置展开状态
• 每个内容容器必须配置data-bs-parent属性绑定手风琴根容器ID，保证打开新面板时自动折叠已展开的其他面板，符合手风琴交互逻辑

如果是Bootstrap 4版本，只需要把上述代码里的data-bs-*前缀替换为data-*即可，其余类名、配置逻辑完全一致。

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