箭头图标不随展开收起旋转是因为未正确使用 transform: rotate() 配合 .collapsed 类切换，且 transition 必须作用于图标元素而非 .collapsed 类本身，同时需避免 display: none 或 pointer-events: none 干扰。
箭头图标不随展开收起旋转？检查是否用了 rotate 而非 transform
Bootstrap 5 的 Accordion 默认用 data-bs-toggle="collapse" 控制展开，但它的箭头（通常是 ❯ 或 Font Awesome 的 fa-chevron-down）不会自动旋转——这是常见误解。真正起作用的是 CSS 中的 transform: rotate()，不是独立的 rotate 属性。
- 必须用
transform: rotate(0deg)和transform: rotate(180deg)配合.collapsed类切换 - Bootstrap 5 在折叠项的
<button>上自动添加/移除.collapsed类，这是唯一可靠的钩子 - 别写成
rotate: 180deg（无效语法），也别试图监听 JavaScript 事件手动加 class
如何让箭头平滑旋转？加 transition 但别作用在 .collapsed 本身
直接给 .collapsed 加 transition 没用，因为该类只是开关，不控制样式。旋转动画必须绑定在图标元素上，且 transition 要写在「默认状态」和「.collapsed 触发的状态」两个规则里。
- 推荐写法：
.accordion-button::after { transition: transform 0.2s ease; }+.accordion-button.collapsed::after { transform: rotate(-180deg); } - 如果用 SVG 或
<i>标签放图标，就把transition加在那个标签上，而不是父按钮 - 避免用
all 0.2s，只过渡transform，否则文字颜色、背景等变化也会被缓动，干扰视觉焦点
自定义图标后旋转失效？确认伪元素或图标元素是否被 display: none 干扰
很多人替换成 Font Awesome 图标后发现旋转不动，问题常出在图标加载延迟或 CSS 重置覆盖。Bootstrap 默认用 ::after 伪元素渲染箭头，一旦你用 <i class="fa-chevron-down"></i> 替换，伪元素还在，但不可见，导致旋转规则没生效。
- 方案一：删掉默认伪元素 —— 加
.accordion-button::after { display: none; } - 方案二：把旋转规则移到自定义图标上，例如
.accordion-button i { transition: transform 0.2s; }+.accordion-button.collapsed i { transform: rotate(-180deg); } - 注意：Font Awesome 的
fa-rotate工具类会和你的transform冲突，禁用它或用!important覆盖
移动端点击无反应？检查 pointer-events 是否被误设为 none
有些定制样式里为了“禁用按钮”临时加了 pointer-events: none，结果整个折叠按钮失活，箭头当然也不转了。这不是旋转逻辑问题，而是交互链断了。
立即学习“前端免费学习笔记（深入）”；
- 排查方法：用浏览器 DevTools 选中
.accordion-button，看 computed 样式里pointer-events是否为none - 常见诱因：全局重置 CSS 里写了
button { pointer-events: none; }，或某个父容器设置了pointer-events: none - 修复只需加一条覆盖规则：
.accordion-button { pointer-events: auto !important; }
::after 的 content 和 transform，避免引入额外 DOM 元素和样式冲突。 
