Bootstrap 5手风琴自定义箭头90度旋转及首次加载异常问题咨询

问题解决方案 #

不需要修改collapse.js源码或额外编写JS代码，仅通过SCSS配置+HTML类调整即可实现需求，你当前的异常是状态对应逻辑匹配错误导致的。

异常原因 #

Bootstrap 5手风琴的箭头变换规则为：

• 展开状态的按钮（对应折叠面板带show类）：按钮无collapsed类，箭头应用$accordion-icon-transform定义的变换
• 闭合状态的按钮（对应折叠面板无show类）：按钮带collapsed类，箭头不应用任何变换，显示原始图标样式
  你当前初始加载显示v形箭头，是因为默认闭合的手风琴按钮未提前添加collapsed类，页面初始化前就应用了展开状态的旋转变换；手动开关一次后JS自动补全了collapsed类，所以显示恢复正常。

调整步骤 #

1. 你已完成的变量配置不需要改动：
   • 保留$accordion-icon-transform: rotate(90deg)的配置
   • 保留替换为>形的$accordion-button-icon SVG配置
2. 二选一实现初始状态适配：
   • 方案1：写HTML结构时，给所有默认闭合的手风琴按钮统一加上collapsed类，同时确保对应的折叠面板容器不带show类，初始加载即可正常显示>形箭头
   • 方案2：无需修改HTML，添加一行自定义样式覆盖默认规则即可：

   .accordion-button::after {
     transform: rotate(0);
   }
   

内容的提问来源于stack exchange，提问作者anna-b