Accordion展开后边框消失或断开的根本原因是.accordion-item的border-color被忽略或覆盖，该类才是控制边框的唯一入口；箭头图标旋转失效因.collapsed类表示折叠态而非展开态；内容区域跳动源于height动画与JS状态不同步，应改用transform: scaleY()；搜索后状态错乱因直接操作DOM破坏Bootstrap三元组状态；所有问题前提均为.accordion-item必须是.accordion的直接子元素。
Accordion展开后边框消失或断开
根本原因是.accordion-item的border-color被忽略或覆盖，而这个类才是控制边框的唯一入口——不是.accordion-button，也不是.accordion-collapse。
常见错误包括：直接给.accordion-button加border-bottom，结果遮住了.accordion-item本该画出的下边框；或者只改了border-color却漏了border-width和border-style，导致视觉上“断线”。
- 调试时可临时加
!important验证：.accordion-item { border-color: #dc3545 !important; } - 上线前应改用增强选择器权重的方式，比如外层加
class="faq-accordion"，再写.faq-accordion .accordion-item { border-color: #dc3545; } - 确保
border-width保持默认1px、border-style为solid，否则边框会不连续
展开后箭头图标旋转失效或颜色异常
箭头通常用::after伪元素实现，但.collapsed类名含义容易被误解：它表示“当前面板处于折叠态”，也就是说，展开时这个类**不存在**，而不是“展开时才加上”。
如果图标变色或不动，大概率是用了color继承文字色，但箭头需要独立控制。Bootstrap 5.3+ 提供了 CSS 变量--bs-accordion-btn-icon-color，比硬写color更稳。
- 正确写法示例：
.accordion-button::after { content: "▼"; transition: transform .2s; } - 展开态写：
.accordion-button:not(.collapsed)::after { transform: rotate(-180deg); } - 避免用
background-image做箭头——Safari 旧版易糊，旋转时颜色不同步 - 图标对齐用
align-middle，别依赖vertical-align: middle手动调
展开后内容区域高度残留或跳动
这是height过渡动画与 Bootstrap JS 状态不同步导致的典型问题。JS 在动画结束前就移除了.collapsing类，但内联style="height: XXpx"没清掉，下次展开就会从错误高度开始动画。
根本解法不是调慢transition，而是绕开height——改用transform: scaleY()配合overflow: hidden。
- 必须加
.collapse { height: auto !important; }，否则bs-collapse脚本仍会注入内联 height .collapse:not(.show) { transform: scaleY(0); transform-origin: top; }.collapse.show { transform: scaleY(1); }- 父容器需设
min-height防塌陷，否则内容展开瞬间会“抖一下”
搜索过滤后展开状态错乱
手动用document.querySelectorAll('.accordion-collapse').forEach(el => el.classList.remove('show'))这类 DOM 操作，会破坏 Bootstrap 内部的状态三元组：aria-expanded、class、实际 DOM 高度。点开可能无反应，或重复展开。
正确做法是用官方 JS API 显式控制每个实例，而不是批量操作 class。
- 初始化时存引用：
const collapseInstances = document.querySelectorAll('.accordion-collapse').map(el => new bootstrap.Collapse(el, { toggle: false })) - 过滤后遍历调用：
collapseInstances.forEach(c => c.hide())或按需c.show() - 不要用
el.style.display = 'none'——这会绕过所有 Bootstrap 状态管理 - 如果用了自定义搜索逻辑，记得在
shown.bs.collapse事件里同步更新 UI 状态（比如高亮关键词）
最常被忽略的点是：所有这些样式和行为问题，都依赖于.accordion-item必须是.accordion的**直接子元素**。中间插一层<div>，事件委托链就断了，<code>data-bs-parent联动失效，连带所有状态钩子失灵——这时你调样式、改 JS 都白搭。
