如何修复Bootstrap 5.1 Accordion手风琴Chevron箭头方向异常问题

问题根因 #

1. HTML状态不匹配：accordion-button设置了aria-expanded="true"代表默认展开，但对应的#collapseOne元素仅添加了collapse类，没有加show类，导致初始状态下按钮的.collapsed类和面板实际展开状态不一致，Bootstrap内置的箭头旋转规则触发异常。
2. 自定义CSS规则冲突：你给收起、展开两种状态的按钮伪元素设置了完全相同的向下箭头SVG，Bootstrap默认会给非折叠状态的.accordion-button::after添加transform: rotate(180deg)的旋转规则，相当于没有调整箭头方向反而被默认规则倒置，出现状态对应错误。

修复步骤 #

• 第一步：对齐HTML初始状态
  若需要手风琴默认展开，给#collapseOne添加show类：

  <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordion">
  

  若需要手风琴默认收起，修改按钮属性，添加collapsed类、把aria-expanded改为false：

  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
  

• 第二步：修正自定义CSS规则，二选一即可
  方案1：保留默认旋转逻辑，仅修改箭头颜色
  直接删除重复定义的.accordion-button:not(.collapsed)::after规则，Bootstrap会自动给展开状态的箭头添加180度旋转适配方向：

  .accordion-button::after {
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23A81912'%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");
  }
  

  方案2：完全自定义两种状态的箭头，禁用默认旋转
  自行定义向上、向下两个方向的箭头，同时覆盖默认的旋转规则：

  /* 收起状态：箭头向下 */
  .accordion-button::after {
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23A81912'%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");
      transform: none !important;
  }
  /* 展开状态：箭头向上 */
  .accordion-button:not(.collapsed)::after {
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23A81912'%3e%3cpath fill-rule='evenodd' d='M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z'/%3e%3c/svg%3e");
      transform: none !important;
  }
  

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