Bootstrap 4.4.1手风琴无法单次展开面板，Bootstrap 3可正常工作

你遇到的问题是因为Bootstrap 4重构了手风琴组件的结构，不再沿用Bootstrap 3的panel-group、panel等类，导致原有的data-parent逻辑无法正常触发面板自动关闭的功能。

正确的Bootstrap 4.4.1手风琴实现代码 #

<div class="accordion" id="accordion1">
  <!-- 面板1 -->
  <div class="card">
    <div class="card-header" id="headingOne">
      <h2 class="mb-0">
        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseOne1" data-parent="#accordion1">
          Collapsible Group Item #1
        </button>
      </h2>
    </div>
    <div id="collapseOne1" class="collapse" aria-labelledby="headingOne" data-parent="#accordion1">
      <div class="card-body">
        ...
      </div>
    </div>
  </div>
  <!-- 面板2 -->
  <div class="card">
    <div class="card-header" id="headingTwo">
      <h2 class="mb-0">
        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo1" data-parent="#accordion1">
          Collapsible Group Item #2
        </button>
      </h2>
    </div>
    <div id="collapseTwo1" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion1">
      <div class="card-body">
        ...
      </div>
    </div>
  </div>
  <!-- 面板3 -->
  <div class="card">
    <div class="card-header" id="headingThree">
      <h2 class="mb-0">
        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree1" data-parent="#accordion1">
          Collapsible Group Item #3
        </button>
      </h2>
    </div>
    <div id="collapseThree1" class="collapse" aria-labelledby="headingThree" data-parent="#accordion1">
      <div class="card-body">
        ...
      </div>
    </div>
  </div>
</div>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

关键注意事项 #

• Bootstrap 4的手风琴基于card组件构建，必须使用card、card-header等类替代Bootstrap 3的panel系列类
• 确保每个折叠触发按钮和折叠面板都设置data-parent="#accordion1"（值为手风琴容器的id），这是实现自动关闭其他面板的核心
• collapsed类用于标记按钮初始为收起状态，若需要默认展开某个面板，移除对应按钮的collapsed类，并给折叠面板添加show类

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