Bootstrap accordion点击全展开、初始箭头状态异常修复方案

现有代码存在3处不符合Bootstrap Accordion组件规则的错误，直接导致联动异常、箭头状态与实际折叠状态不同步：

• 重复ID冲突：5个折叠面板全部使用相同的id="collapseOne"，对应按钮的data-bs-target也全部指向#collapseOne。HTML规范要求页面内ID必须全局唯一，Bootstrap的交互脚本无法正确区分不同面板，才会出现点击单一项触发所有面板联动、状态错乱的问题。
• 初始状态属性配置反向：需求为页面加载时默认全折叠，但所有按钮都设置了aria-expanded="true"，所有折叠容器都加了show类。Bootstrap通过这两个标记判断初始状态：aria-expanded="true"代表按钮为展开状态（组件会自动移除按钮的collapsed类，渲染向上的展开箭头），折叠容器加show类则代表默认展开。属性配置与实际需求相反，就会出现视觉上内容已折叠，但箭头仍保持展开态，需要点击两次才能同步状态的问题。
• 父容器绑定失效：所有折叠面板的data-bs-parent都指向了不存在的#accordionExample节点，但实际手风琴的父容器是class为accordion的div，没有匹配的ID，因此手风琴同一时间仅允许展开一个面板的互斥逻辑完全不生效。
  额外语法问题：h4标题标签使用了</h2>闭合，属于HTML语法错误，虽然不影响手风琴功能，但建议修正。

不需要额外写JS逻辑，只需要修正HTML属性配置，补充少量CSS覆盖默认箭头颜色即可。

修正后HTML代码 #

给手风琴父容器设置唯一ID，每个折叠面板使用独立ID，初始状态统一设为折叠，修正父容器绑定指向：

<div class="col-12 offset-4 my-5" id="dropdowns">
  <h4 id="data" class="ph">Test accordions</h4>
  <div class="accordion" id="accordionWrap">
    <div class="accordion-item">
      <button style="font-weight: bold; background-color: #f5f5f5;" class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
        Test
      </button>
      <div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#accordionWrap">
        <div class="accordion-body" style="background-color: #f5f5f5;">
          Placeholder text
        </div>
      </div>
    </div>
    <div class="accordion-item">
      <button style="font-weight: bold; background-color: #f5f5f5;" class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
        Test
      </button>
      <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionWrap">
        <div class="accordion-body" style="background-color: #f5f5f5;">
          Placeholder text
        </div>
      </div>
    </div>
    <div class="accordion-item">
      <button style="font-weight: bold; background-color: #f5f5f5;" class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
        Test
      </button>
      <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionWrap">
        <div class="accordion-body" style="background-color: #f5f5f5;">
          Placeholder text
        </div>
      </div>
    </div>
    <div class="accordion-item">
      <button style="font-weight: bold; background-color: #f5f5f5;" class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
        Test
      </button>
      <div id="collapseFour" class="accordion-collapse collapse" aria-labelledby="headingFour" data-bs-parent="#accordionWrap">
        <div class="accordion-body" style="background-color: #f5f5f5;">
          Placeholder text
        </div>
      </div>
    </div>
    <div class="accordion-item">
      <button style="font-weight: bold; background-color: #f5f5f5;" class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
        Test
      </button>
      <div id="collapseFive" class="accordion-collapse collapse" aria-labelledby="headingFive" data-bs-parent="#accordionWrap">
        <div class="accordion-body" style="background-color: #f5f5f5;">
          Placeholder text
        </div>
      </div>
    </div>
  </div>
</div>

修正后CSS代码 #

原有自定义样式可全部保留，仅新增两段规则覆盖默认的蓝色箭头，改为与文本一致的黑色，匹配整体设计风格：

.ph {
  font-weight: bold;
}

.accordion-button:focus {
  font-weight: bold;
  box-shadow: none;
  border-color: black;
}

.accordion-button:not(.collapsed) {
  color: black;
  background-color: #f5f5f5;
  /* 覆盖展开状态默认蓝色箭头，改为黑色 */
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

/* 折叠状态箭头统一为黑色 */
.accordion-button.collapsed {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.accordion-button:link, .accordion-button:visited, .accordion-button:hover, .accordion-button:active {
  background-color: #f5f5f5;
  color: black;
  text-decoration: none;
  border: hidden;
  border-color: #f5f5f5;
  box-shadow: 0px;
}

.accordion-item {
  border-top: hidden;
  border-left: hidden;
  border-right: hidden;
  border-bottom-color: #d4d4d4;
  border-bottom-style: solid;
  border-bottom-width: 2px;
}

.accordion-button {
  padding-left: 0px;
}

• 页面重载后所有面板默认折叠，箭头为黑色向下的折叠状态，单次点击即可触发展开，无需点击两次
• 点击任意面板展开时，其他已展开面板会自动收起，符合手风琴组件的互斥交互逻辑
• 完全移除了默认的蓝色高亮、焦点发光边框等冗余样式，仅保留基础手风琴结构和交互
• 不会再出现点击单一项触发所有面板联动的问题

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