Bootstrap 5如何实现按钮点击互斥切换显隐对应内容？

直接利用Collapse组件原生的分组互斥能力即可实现需求，不需要编写自定义JavaScript逻辑，组件会自动处理「展开当前内容前先隐藏同组其他已展开内容」的交互顺序。

核心修改点 #

• 给两个需要互斥的折叠内容块添加同一个父容器
• 给每个折叠内容块添加data-bs-parent属性，属性值指向共同父容器的选择器，Bootstrap会自动将同属一个父容器的折叠内容设为互斥模式
• 修正原代码中写错的aria-controls无障碍属性值，让按钮和对应控制的内容id匹配

完整可运行代码 #

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<p>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapse1" aria-expanded="false" aria-controls="collapse1">
    Button 1
  </button>
  
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapse2" aria-expanded="false" aria-controls="collapse2">
    Button 2
  </button>
</p>

<!-- 互斥折叠组的共同父容器 -->
<div id="collapseGroup">
  <div class="collapse" id="collapse1" data-bs-parent="#collapseGroup">
    Button 1 content
  </div>

  <div class="collapse" id="collapse2" data-bs-parent="#collapseGroup">
    Button 2 content
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

效果说明 #

• 点击按钮1时会展开按钮1对应内容，若当前按钮2内容为展开状态，会先执行按钮2内容的隐藏动画，再展示按钮1内容，反向操作逻辑一致
• 点击已展开内容对应的按钮时，会正常折叠当前内容，不会强制展开其他内容
• 所有动画时序、aria-expanded等无障碍状态都由Bootstrap自动维护，不需要额外处理

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