Bootstrap折叠面板的 Accordion手风琴样式

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">
• 所有子项的 data-bs-parent 必须严格等于 "#faq-accordion"（含 #，且大小写、连字符完全一致）
• accordion-item 必须是该容器的**直接子元素**；中间插一层 <div> 就会中断事件委托链
• 如果页面有多个 Accordion，每个都得配独立 ID 和对应 data-bs-parent 值，不能复用

折叠按钮没箭头？用伪元素 + collapsed 类联动最稳

Bootstrap 默认不提供箭头图标，靠自己加。用 ::after 伪元素配合 :not(.collapsed) 是兼容性好、维护成本低的方案。

.collapsed 这个类名容易误解：它表示「当前按钮所控制的面板处于折叠态」，也就是点击后加上的类。所以未折叠（即内容展开）时，这个类**不存在**。

• 基础样式写 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继承链

Accordion 边框颜色不是由 .accordion-button 或 .accordion-collapse 控制的，而是由 .accordion-item 的 border-color 决定，它默认继承自 Sass 变量 $border-color 或 $accordion-border-color。

• 临时调试可写：.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; } }

动态生成的 Accordion 列表，eventKey 或 ID 不能用数组索引

在 React（如 react-bootstrap/Accordion）或模板引擎中循环渲染时，每个面板的标识必须稳定、唯一、可预测。

用 index 当 eventKey（React）或 id/data-bs-target（原生）是高危操作：一旦列表排序、过滤、增删，索引重排，状态就会错乱——比如点开第二项，结果第一项的内容展开了。

• 优先用业务唯一字段，比如 faq.id、section.slug、item.uuid
• 如果真没业务 ID，可用哈希函数生成确定性字符串，比如 hash(item.title + item.content)
• 确保 data-bs-target 和对应 collapse 元素的 id 完全一致（含 #），大小写敏感
• 避免在 Accordion.Body 里放未 memo 的重型组件，滚动或切换时容易重复渲染卡顿

实际项目里最常卡住的不是结构不会写，而是 ID 和选择器之间差了一个 #，或者以为改了按钮样式就能影响边框——结果调半天发现边框根本不在那儿。细节对不上，整个手风琴就静音了。