应通过监听 shown.bs.collapse 和 hidden.bs.collapse 事件，依据 aria-expanded 属性状态，用 classList.replace() 精准切换图标类名，避免全局查询和 toggle() 误操作，Bootstrap 5 需手动设置 aria-expanded。
怎么用 data 属性控制折叠图标切换
bootstrap 的 collapse 插件本身不内置图标，图标是纯前端“装饰层”，必须手动加、手动切。你不能指望 data-toggle="collapse" 自动翻转箭头——它只管显隐内容，不管图标长什么样。
常见错误是给所有面板标题统一加一个 <i class="bi bi-chevron-down"></i>，然后点击后发现所有图标一起变，或者根本不变。这是因为没绑定到具体展开/收起状态，而是静态写死的。
- 必须用 JavaScript 监听
shown.bs.collapse和hidden.bs.collapse事件（不是 click） - 图标元素得和触发器（比如 panel-heading）在同一个 DOM 节点下，方便用
querySelector找到 - 别用
toggle()同时操作两个互斥类名（如bi-chevron-down/bi-chevron-up），容易状态错乱；应明确判断当前是否aria-expanded="true"
为什么 classList.replace() 比 toggle() 更可靠
很多教程教用 element.classList.toggle("bi-chevron-down").toggle("bi-chevron-up")，但这是错的：两次 toggle() 是独立执行的，中间没同步逻辑，可能前一次刚加完，后一次又把它删了，最终图标消失或残留旧类。
正确做法是先读状态，再一次性替换：
const icon = heading.querySelector("i");
const isExpanded = heading.getAttribute("aria-expanded") === "true";
icon.classList.replace(
isExpanded ? "bi-chevron-down" : "bi-chevron-up",
isExpanded ? "bi-chevron-up" : "bi-chevron-down"
);
这样确保图标类名始终一进一出，无中间态。注意：replace() 是现代浏览器支持的 API，IE 不支持，若需兼容 IE，改用 remove() + add() 组合。
如何避免多个面板互相干扰（尤其是 Accordion 场景）
在 data-parent="#accordion" 的手风琴模式下，每次只开一个面板，但图标切换逻辑如果写成全局查询（如 document.querySelectorAll(".panel-title i")），就会批量操作所有图标，导致“刚点开 A，B 的图标也变了”。
- 事件监听必须绑定在具体触发器上，例如
heading.addEventListener("shown.bs.collapse", ...) - 不要用
$("#accordion i")这类宽泛选择器，而要用event.target.nextElementSibling.querySelector("i")或类似路径精准定位 - 如果用 jQuery，优先用
$(e.target).find("i")，而不是$("i")
Bootstrap 5 和 3/4 的关键差异点
Bootstrap 5 移除了 Glyphicons，推荐用 Bootstrap Icons（bi 前缀），而 3/4 默认用 glyphicon 或 Font Awesome。这直接影响类名写法和字体加载方式。
另外，BS5 的 collapse 事件名没变，但默认不再自动加 aria-expanded 到触发器上——你得自己补上，否则无法靠属性判断状态：
<h2 class="panel-title">
<button class="btn btn-link" type="button"
data-bs-toggle="collapse"
data-bs-target="#collapseOne"
aria-expanded="false">标题</button>
<i class="bi bi-chevron-down"></i>
</h2>
漏掉 aria-expanded，JS 就没法知道当前是开是关，图标切换就必然失效。这个细节，90% 的人第一次都会忽略。
图标切换这事，表面是加个 class，实际是状态同步问题。状态源在哪、谁负责更新、谁负责读取——这三个点对不上，图标就永远跟不上内容。
