如何用Bootstrap 5实现5个按钮的内容显隐且避免内容堆叠

方法一：利用Bootstrap内置手风琴特性（推荐） #

Bootstrap的Collapse组件原生支持手风琴效果，只需给所有内容区域设置同一个父容器，再给每个按钮添加data-bs-parent属性指向该父容器ID，就能自动实现“点击一个展开、其余收起”的效果，无需额外编写JS。

代码示例：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>

<!-- 统一父容器，控制手风琴组 -->
<div id="accordionGroup">
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapse1" aria-expanded="false" data-bs-parent="#accordionGroup">
    Button 1
  </button>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapse2" aria-expanded="false" data-bs-parent="#accordionGroup">
    Button 2
  </button>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapse3" aria-expanded="false" data-bs-parent="#accordionGroup">
    Button 3
  </button>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapse4" aria-expanded="false" data-bs-parent="#accordionGroup">
    Button 4
  </button>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapse5" aria-expanded="false" data-bs-parent="#accordionGroup">
    Button 5
  </button>

  <div class="collapse" id="collapse1">
    Button 1 content
  </div>
  <div class="collapse" id="collapse2">
    Button 2 content
  </div>
  <div class="collapse" id="collapse3">
    Button 3 content
  </div>
  <div class="collapse" id="collapse4">
    Button 4 content
  </div>
  <div class="collapse" id="collapse5">
    Button 5 content
  </div>
</div>

核心说明 #

• data-bs-parent="#accordionGroup" 是关键：它指定当前Collapse组件属于这个父容器的手风琴组，点击展开时会自动收起同组内其他已展开的内容。
• 完全依赖Bootstrap原生功能，代码简洁且维护成本低。

方法二：自定义JavaScript逻辑（灵活扩展） #

如果需要更个性化的控制逻辑（比如添加动画、额外判断等），可以编写通用JS函数批量处理内容的显示/隐藏：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>

<button class="btn btn-primary content-btn" data-target="#collapse1">
  Button 1
</button>
<button class="btn btn-primary content-btn" data-target="#collapse2">
  Button 2
</button>
<button class="btn btn-primary content-btn" data-target="#collapse3">
  Button 3
</button>
<button class="btn btn-primary content-btn" data-target="#collapse4">
  Button 4
</button>
<button class="btn btn-primary content-btn" data-target="#collapse5">
  Button 5
</button>

<div class="content-collapse collapse" id="collapse1">
  Button 1 content
</div>
<div class="content-collapse collapse" id="collapse2">
  Button 2 content
</div>
<div class="content-collapse collapse" id="collapse3">
  Button 3 content
</div>
<div class="content-collapse collapse" id="collapse4">
  Button 4 content
</div>
<div class="content-collapse collapse" id="collapse5">
  Button 5 content
</div>

<script>
// 批量获取按钮和内容区域
const buttons = document.querySelectorAll('.content-btn');
const contentAreas = document.querySelectorAll('.content-collapse');

buttons.forEach(button => {
  button.addEventListener('click', function() {
    const targetId = this.getAttribute('data-target');
    const targetContent = document.querySelector(targetId);
    
    // 先隐藏所有已显示的非目标内容
    contentAreas.forEach(content => {
      if (content !== targetContent && content.classList.contains('show')) {
        content.classList.remove('show');
      }
    });
    
    // 切换目标内容的显示状态（若不需要点击同一按钮收起，替换toggle为add即可）
    targetContent.classList.toggle('show');
  });
});
</script>

核心说明 #

• 给按钮和内容区域统一添加类名，方便批量选择元素，避免逐个绑定事件。
• 逻辑可灵活修改：比如取消同一按钮的收起功能、添加过渡动画、增加权限判断等。

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