Bootstrap 4折叠手风琴：如何始终保持一个面板处于展开状态？

嘿，我来帮你搞定这个需求！Bootstrap 4默认的手风琴组件允许所有面板都折叠起来，要实现始终保持至少一个面板展开，咱们只需要加一点自定义JavaScript逻辑就行，下面是具体的实现方案：

完整代码示例 #

HTML结构（基于你的代码调整完善） #

<div id="accordion">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h5 class="mb-0">
        <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </button>
      </h5>
    </div>
    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
      <div class="card-body">
        这是第一个面板的内容，初始状态为展开状态~
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingTwo">
      <h5 class="mb-0">
        <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </button>
      </h5>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
      <div class="card-body">
        第二个面板的内容，点击可切换展开/折叠，但无法让所有面板都关闭
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingThree">
      <h5 class="mb-0">
        <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </button>
      </h5>
    </div>
    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
      <div class="card-body">
        第三个面板的内容，同样遵循始终有一个面板展开的规则~
      </div>
    </div>
  </div>
</div>

自定义JavaScript逻辑 #

// 给手风琴容器绑定折叠前的监听事件
document.getElementById('accordion').addEventListener('hide.bs.collapse', function(event) {
  // 统计当前处于展开状态的面板数量
  const expandedPanelCount = this.querySelectorAll('.collapse.show').length;
  // 如果当前要折叠的是唯一展开的面板，就阻止折叠动作
  if (expandedPanelCount === 1) {
    event.preventDefault();
  }
});

逻辑说明 #

• 我们选用hide.bs.collapse事件：这个事件会在面板开始折叠之前触发，刚好能让我们拦截不必要的操作
• 每次触发折叠动作时，先统计当前展开的面板总数
• 如果只有1个展开的面板（也就是用户要关闭的这个是最后一个），就用event.preventDefault()阻止折叠，这样就保证了页面始终至少有一个面板处于展开状态
• 注意：一定要保留初始状态下至少一个面板的show类（比如示例中第一个面板的collapse show），不然页面加载时就会出现无面板展开的情况

这样调整之后，你的手风琴就只能在不同面板之间切换展开，再也不会出现全部折叠的情况啦！

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