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

作者：袖梨 2026-06-16

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; } }