Bootstrap 5实现点击展开前折叠所有已展开面板的技术问询

针对你的需求，有两种可行方案，推荐优先使用Bootstrap官方的手风琴组件，无需额外编写复杂JS；如果不想修改现有DOM结构，也可以通过自定义JS逻辑实现。

方案一：使用Bootstrap Accordion组件（推荐） #

Bootstrap自带的Accordion组件原生支持「仅展开一个面板」的手风琴效果，只需调整DOM结构即可，无需额外JS：

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet"/>

<!-- 外层容器作为手风琴父容器 -->
<div class="accordion" id="settings-accordion">
  <!-- Resize面板组 -->
  <div class="accordion-item">
    <h2 class="accordion-header" id="resize-heading">
      <button class="accordion-button collapsed" type="button" 
              data-bs-toggle="collapse" data-bs-target="#resize-form"
              aria-expanded="false" aria-controls="resize-form">
        Resize
      </button>
    </h2>
    <div id="resize-form" class="accordion-collapse collapse" 
         aria-labelledby="resize-heading" data-bs-parent="#settings-accordion">
      <div class="accordion-body bg-primary p-4" style="background: red">
        <p>Resize</p>
      </div>
    </div>
  </div>
  
  <!-- Brightness面板组 -->
  <div class="accordion-item">
    <h2 class="accordion-header" id="brightness-heading">
      <button class="accordion-button collapsed" type="button" 
              data-bs-toggle="collapse" data-bs-target="#brightness-form"
              aria-expanded="false" aria-controls="brightness-form">
        Brightness
      </button>
    </h2>
    <div id="brightness-form" class="accordion-collapse collapse" 
         aria-labelledby="brightness-heading" data-bs-parent="#settings-accordion">
      <div class="accordion-body bg-secondary p-4">
        <p>Brightness</p>
      </div>
    </div>
  </div>
</div>

关键说明：

• 所有面板组放在同一个accordion容器下
• 每个折叠面板添加data-bs-parent属性，值为外层容器的ID，Bootstrap会自动管理面板状态，确保同一时间只有一个面板展开
• 修正了原代码中第二个按钮aria-controls属性的错误（原代码指向resize-form，现在对应正确的brightness-form）

方案二：自定义JS逻辑适配现有结构 #

如果不想修改现有DOM结构，可以通过监听按钮点击事件，借助Bootstrap的Collapse API手动控制面板状态：

修改后的HTML（添加统一类名，修正属性错误） #

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet"/>

<button class="btn btn-secondary collapse-trigger"
    data-bs-toggle="collapse" data-bs-target="#resize-form"
    aria-expanded="false" aria-controls="resize-form" title="Resize">
    Resize
</button>     

<button class="btn btn-secondary collapse-trigger"
    data-bs-toggle="collapse" data-bs-target="#brightness-form"
    aria-expanded="false" aria-controls="brightness-form" title="Brightness">
    Brightness
</button>     

<div id="resize-form" class="collapse bg-primary p-4" style="background: red">
    <p>Resize</p>
</div>
<div id="brightness-form" class="collapse bg-secondary p-4">
    <p>Brightness</p>
</div>

自定义JavaScript代码 #

// 获取所有折叠触发按钮
const triggerButtons = document.querySelectorAll('.collapse-trigger');

triggerButtons.forEach(button => {
  button.addEventListener('click', function(e) {
    // 阻止Bootstrap默认的折叠行为，手动控制状态
    e.preventDefault();
    
    // 获取当前按钮对应的目标面板
    const targetSelector = this.getAttribute('data-bs-target');
    const targetPanel = document.querySelector(targetSelector);
    // 获取或初始化目标面板的Collapse实例
    const targetCollapse = bootstrap.Collapse.getInstance(targetPanel) || new bootstrap.Collapse(targetPanel, { toggle: false });
    
    // 获取所有折叠面板
    const allPanels = document.querySelectorAll('.collapse');
    
    // 关闭所有已展开的面板（排除当前目标面板）
    allPanels.forEach(panel => {
      if (panel !== targetPanel) {
        const panelInstance = bootstrap.Collapse.getInstance(panel);
        if (panelInstance && panelInstance._isShown) {
          panelInstance.hide();
          // 更新对应按钮的无障碍属性
          const relatedButton = document.querySelector(`[data-bs-target="#${panel.id}"]`);
          if (relatedButton) {
            relatedButton.setAttribute('aria-expanded', 'false');
          }
        }
      }
    });
    
    // 切换当前目标面板的状态
    targetCollapse.toggle();
    // 更新当前按钮的无障碍属性
    this.setAttribute('aria-expanded', targetCollapse._isShown.toString());
  });
});

关键说明：

• 给所有按钮添加统一类collapse-trigger，方便批量绑定事件
• 使用Bootstrap的Collapse API获取实例，避免直接操作DOM类导致状态不一致
• 手动更新aria-expanded属性，保证无障碍访问的正确性
• 修正了原代码中第二个按钮aria-controls的错误

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