如何防止Bootstrap同父级折叠元素全部隐藏？确保至少一个可见

要实现同一时间仅显示一个折叠面板，且当前展开项无法被单独收起，只能通过切换其他项来收起，可以通过监听折叠组件的点击事件拦截默认行为，具体实现如下：

核心逻辑 #

Bootstrap的data-bs-parent默认允许点击当前展开项的触发器来收起它，我们需要判断：如果点击的是已展开项的触发器，就阻止折叠动作；如果是其他项的触发器，则正常执行切换（收起当前项，展开新项）。

完整代码示例 #

span[data-bs-toggle] { cursor : pointer; }

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

<span data-bs-toggle="collapse" data-bs-target="#content1">#1</span>
<span data-bs-toggle="collapse" data-bs-target="#content2">#2</span>
<span data-bs-toggle="collapse" data-bs-target="#content3">#3</span>
<div id="container">
  <span id="content1" class="collapse show" data-bs-parent="#container">#1+</span>
  <span id="content2" class="collapse" data-bs-parent="#container">#2+</span>
  <span id="content3" class="collapse" data-bs-parent="#container">#3+</span>
</div>

<script>
// 给所有折叠触发器绑定点击事件
document.querySelectorAll('[data-bs-toggle="collapse"]').forEach(trigger => {
  trigger.addEventListener('click', function(e) {
    const targetId = this.getAttribute('data-bs-target');
    const targetElement = document.querySelector(targetId);
    
    // 若目标元素处于展开状态，阻止默认折叠行为
    if (targetElement.classList.contains('show')) {
      e.preventDefault();
      e.stopPropagation();
    }
  });
});
</script>

原理说明 #

• 给每个折叠触发器绑定点击事件，点击时先获取对应的目标折叠元素
• 如果目标元素已经带有show类（处于展开状态），就阻止默认的折叠动作，避免当前项被单独收起
• 点击其他触发器时，目标元素是折叠状态，不会触发阻止逻辑，Bootstrap会自动执行手风琴的切换规则（收起当前项，展开新项）

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