如何修改Bootstrap 4手风琴行为，实现单面板独占展开？

问题说明 #

我使用基于Bootstrap 4.3.1的HTML模板向学生展示学习内容，当前模板里的手风琴默认所有面板在页面加载时都处于关闭状态，且可以同时展开任意数量的面板。现在需要修改成仅单个面板可展开的模式——打开新面板时自动关闭已经展开的面板。但现有代码结构和Bootstrap官方示例不同，没有用a或button标签触发折叠事件，没法直接套用官方的data-toggle等属性实现需求。

修改步骤及完整代码 #

要实现单面板互斥展开，需要给现有代码做三处调整：

• 给每个折叠面板添加唯一ID
• 用button标签包裹标题文本，添加折叠触发的data属性，同时保持原有样式
• 给手风琴容器添加data-parent属性，指定互斥范围

修改后的完整代码如下：

<h2>Accordion: Group of 2</h2>
<p class="small">Accordion: start copy</p>
<!-- Accordion headings should be changed to respect page hierarchy -->
<div class="accordion shadow mb-5" id="accordionGroup">
   <div class="card">
      <div class="card-header">
         <h2 class="card-title">
            <button class="btn btn-link p-0 text-left" data-toggle="collapse" data-target="#collapse1" aria-expanded="false" aria-controls="collapse1">
               Accordion 1 of 2
            </button>
         </h2>
      </div>
      <div class="collapse" id="collapse1" data-parent="#accordionGroup">
         <div class="card-body">
            <p>Insert Accordion 1 of 2 content here.</p>
         </div>
      </div>
   </div>
   <div class="card">
      <div class="card-header">
         <h2 class="card-title">
            <button class="btn btn-link p-0 text-left" data-toggle="collapse" data-target="#collapse2" aria-expanded="false" aria-controls="collapse2">
               Accordion 2 of 2
            </button>
         </h2>
      </div>
      <div class="collapse" id="collapse2" data-parent="#accordionGroup">
         <div class="card-body">
            <p>Insert Accordion 2 of 2 content here.</p>
         </div>
      </div>
   </div>
</div>
<p class="small">Accordion: end copy</p>

关键说明 #

1. button样式：用btn btn-link p-0 text-left确保按钮和原标题的外观一致——透明背景、无边距、左对齐，不会破坏原有模板的视觉效果
2. data-parent属性：这个属性是实现互斥展开的核心，它指定了手风琴的容器范围，当触发某个面板展开时，Bootstrap会自动关闭该容器内其他已展开的面板
3. aria属性：添加aria-expanded和aria-controls是为了保证页面的可访问性，符合无障碍设计规范

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