Bootstrap4手风琴展开新模块时如何阻止其他已展开模块自动折叠

Bootstrap 4 手风琴默认的互斥折叠效果，是通过折叠项的 data-parent 属性实现的，该属性会将所有关联到同一父容器的折叠项设为互斥状态，展开新项时自动关闭其他已展开项，你可以通过以下两种方法实现多区块同时展开的需求：

方法一：修改HTML（最简单直接） #

把所有折叠内容容器（即代码中 id="collapseOne"、id="collapseTwo"、id="collapseThree" 对应的div）上的 data-parent="#accordionExample" 属性全部删除即可。

修改后的单个区块代码参考：

<!-- 第一个区块修改示例，第二、第三个区块做相同修改即可 -->
<div id="collapseOne" class="collapse" aria-labelledby="headingOne">
  <div class="card-body">
    <!-- 内部复选框等原有代码保持不变 -->
  </div>
</div>

修改完成后每个区块的展开、折叠逻辑完全独立，点击新区块不会关闭已打开的区块。

方法二：通过JS初始化（无需修改原有HTML） #

如果不想改动现有HTML结构，也可以在页面加载时通过JS重新初始化折叠组件，关闭互斥逻辑：

$(function() {
  $('.collapse').collapse({
    parent: false, // 取消父容器关联，关闭互斥逻辑
    toggle: false // 避免初始化时自动触发折叠/展开动作
  })
})

额外提示：你现有代码中同个区块下的多个复选框使用了重复的id属性，不符合HTML规范，会导致label点击关联失效，建议修改为每个复选框的id唯一。

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