accordion互斥展开失效的核心原因是data-bs-parent值不匹配：必须为含#的唯一id选择器（如"#faq-accordion"），且外层容器需有对应id，子项须为直接子元素，多个accordion须用不同id。
Accordion互斥展开失效，一定是data-bs-parent没对上
点开一个面板，其他不自动收起，核心原因就一个：data-bs-parent 的值不是有效的 CSS ID 选择器，或者对应容器根本不存在。
常见错误写法包括：data-bs-parent=".accordion"（用类名但没加 . 或容器压根没设 class）、data-bs-parent="myAccordion"（漏了 #）、data-bs-parent="#accordion"（多个 accordion 共用同一 ID，违反唯一性）。
- 外层容器必须带
id，且只能是 ID —— 比如<div class="accordion" id="faq-accordion"> <li>所有子项的 <code>data-bs-parent必须严格等于"#faq-accordion"（含#，且大小写、连字符完全一致） -
accordion-item必须是该容器的**直接子元素**；中间插一层<div> 就会中断事件委托链 <li>如果页面有多个 Accordion，每个都得配独立 ID 和对应 <code>data-bs-parent值，不能复用 - 基础样式写
button.accordion-button::after，设置content: "▼"和transition: transform .2s - 展开态样式写
button.accordion-button:not(.collapsed)::after，加transform: rotate(-180deg) - 别用
background-image做箭头——旋转时边缘糊、颜色难同步、旧版 Safari 易出 bug - 确保按钮左右
padding足够（至少1.5rem），否则手指点到箭头区域可能不触发折叠 - 临时调试可写：
.accordion-item { border-color: #0d6efd !important; }，但上线前建议去掉!important - 更稳妥的是增强选择器权重，比如给外层加
class="faq-accordion"，再写.faq-accordion .accordion-item { border-color: #dc3545; } - 注意：只改
border-color不够，border-width和border-style也要和 Bootstrap 默认一致（通常是1px solid），否则视觉断线 - 深色模式下记得补媒体查询：
@media (prefers-color-scheme: dark) { .accordion-item { border-color: #495057; } } - 优先用业务唯一字段，比如
faq.id、section.slug、item.uuid - 如果真没业务 ID，可用哈希函数生成确定性字符串，比如
hash(item.title + item.content) - 确保
data-bs-target和对应collapse元素的id完全一致（含#），大小写敏感 - 避免在
Accordion.Body里放未 memo 的重型组件，滚动或切换时容易重复渲染卡顿
折叠按钮没箭头？用伪元素 + collapsed 类联动最稳
Bootstrap 默认不提供箭头图标，靠自己加。用 ::after 伪元素配合 :not(.collapsed) 是兼容性好、维护成本低的方案。
.collapsed 这个类名容易误解：它表示「当前按钮所控制的面板处于折叠态」，也就是点击后加上的类。所以未折叠（即内容展开）时，这个类**不存在**。
边框颜色改不动？优先检查.accordion-item的border-color继承链
Accordion 边框颜色不是由 .accordion-button 或 .accordion-collapse 控制的，而是由 .accordion-item 的 border-color 决定，它默认继承自 Sass 变量 $border-color 或 $accordion-border-color。
动态生成的 Accordion 列表，eventKey 或 ID 不能用数组索引
在 React（如 react-bootstrap/Accordion）或模板引擎中循环渲染时，每个面板的标识必须稳定、唯一、可预测。
用 index 当 eventKey（React）或 id/data-bs-target（原生）是高危操作：一旦列表排序、过滤、增删，索引重排，状态就会错乱——比如点开第二项，结果第一项的内容展开了。
#，或者以为改了按钮样式就能影响边框——结果调半天发现边框根本不在那儿。细节对不上，整个手风琴就静音了。
