嘿，我帮你搞定这个需求！你要的其实是手风琴式的折叠面板+标题样式切换，完全不用额外写复杂JS，用Bootstrap自带的属性和CSS就能实现，正好匹配你的场景。

核心思路 #

1. 用data-bs-parent属性把所有折叠面板绑定到同一个父容器，这样点击一个标题展开内容时，其他所有面板会自动关闭。
2. 利用Bootstrap自动给触发元素添加的aria-expanded属性，来切换标题的背景色（展开时变白，折叠时恢复灰色）。

完整代码示例 #

<!-- 父容器，所有折叠面板都归属于它 -->
<div class="container mt-4" id="accordionGroup">
  <!-- 第一个折叠项 -->
  <div class="mb-3">
    <!-- 标题div，点击触发折叠 -->
    <div class="panel-title bg-gray p-3 cursor-pointer"
         data-bs-toggle="collapse"
         data-bs-target="#content1"
         data-bs-parent="#accordionGroup">
      标题1
    </div>
    <!-- 内容区域 -->
    <div id="content1" class="collapse">
      <div class="p-3 border border-top-0">
        这是标题1对应的展开内容，点击其他标题会自动关闭我~
      </div>
    </div>
  </div>

  <!-- 第二个折叠项 -->
  <div class="mb-3">
    <div class="panel-title bg-gray p-3 cursor-pointer"
         data-bs-toggle="collapse"
         data-bs-target="#content2"
         data-bs-parent="#accordionGroup">
      标题2
    </div>
    <div id="content2" class="collapse">
      <div class="p-3 border border-top-0">
        这是标题2对应的展开内容，我也会被其他标题触发关闭哦~
      </div>
    </div>
  </div>

  <!-- 第三个折叠项 -->
  <div class="mb-3">
    <div class="panel-title bg-gray p-3 cursor-pointer"
         data-bs-toggle="collapse"
         data-bs-target="#content3"
         data-bs-parent="#accordionGroup">
      标题3
    </div>
    <div id="content3" class="collapse">
      <div class="p-3 border border-top-0">
        我是标题3的内容，同样支持手风琴联动~
      </div>
    </div>
  </div>
</div>

<style>
/* 默认灰色背景 */
.bg-gray {
  background-color: #e9ecef;
  transition: background-color 0.2s ease; /* 加个过渡动画更丝滑 */
}

/* 展开时的白色背景 */
.panel-title[aria-expanded="true"] {
  background-color: #ffffff;
}

/* 鼠标悬停效果，提升交互感 */
.cursor-pointer {
  cursor: pointer;
}
</style>

<!-- 别忘了引入Bootstrap的CSS和JS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

关键细节说明 #

• data-bs-parent="#accordionGroup"：这个是实现“关闭其他面板”的核心！它告诉Bootstrap，所有带有这个属性的触发元素，都属于同一个手风琴组，点击其中一个展开时，组内其他已展开的面板会自动折叠。
• aria-expanded属性：Bootstrap会自动给触发折叠的元素添加这个属性——当面板展开时，值为true；折叠时为false。我们用CSS选择器panel-title[aria-expanded="true"]来给展开状态的标题设置白色背景，完全不用自己写JS判断状态。
• 过渡动画：给背景色加个transition，切换时会更丝滑，提升用户体验。

这样改造后，就完全符合你的需求啦：点击标题展开对应内容，同时关闭其他所有内容；标题默认灰色，展开变白，折叠恢复灰色。

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