Accordion默认动画太生硬，怎么用CSS覆盖transition
Bootstrap 5的accordion-collapse默认用height + overflow做展开收起，但过渡只作用于height，且固定为0.35s ease-in-out，视觉上像“抽搐”。想改缓动曲线或加opacity淡入，得手动覆盖。
- 必须把
transition写在.accordion-collapse上，而不是.accordion-body——后者是子元素，动画不触发 - 不能只写
transition: all，要显式声明height和opacity，否则Bootstrap JS切换height时会忽略opacity变化 - 记得加
!important（Bootstrap 5用:not(.show)强设height: 0，不加!important会被覆盖）
.accordion-collapse {
transition: height 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease-in !important;
}
.accordion-collapse:not(.show) {
opacity: 0;
}
移动端点击区域小，如何扩大折叠按钮可点击范围
默认accordion-button只有文字部分响应点击，手指点不准容易失焦。问题不在JS逻辑，而在CSS盒模型限制。
- 别直接给
.accordion-button加padding——它内部有::after三角图标，padding会撑开布局导致图标错位 - 正确做法：用
min-height+padding组合，并重置text-align防文字偏移 - 对触屏设备，额外加
touch-action: manipulation减少300ms延迟
.accordion-button {
min-height: 48px;
padding: 12px 20px;
text-align: left;
}
@media (max-width: 768px) {
.accordion-button {
touch-action: manipulation;
}
}
多个Accordion并存时，如何避免CSS动画互相干扰
页面放了两组accordion（比如左侧导航+右侧FAQ），改了一处动画，另一处也跟着变——因为Bootstrap所有折叠面板共用同一套class名，CSS选择器没做隔离。
- 不要用全局
.accordion-collapse写样式，给每组加唯一data-属性，比如data-accordion-group="faq" - CSS里用属性选择器限定范围：
[data-accordion-group="faq"] .accordion-collapse - 如果用了Bootstrap自定义主题色（如
data-bs-theme="dark"），注意data-属性优先级高于class，需在选择器中一并带上
折叠内容含图片/iframe时，高度计算异常怎么办
当.accordion-body里有未设置宽高的<img>或<iframe>，展开后高度忽高忽低，甚至出现滚动条闪现——这是浏览器异步加载资源导致scrollHeight被Bootstrap JS读取过早。
立即学习“前端免费学习笔记（深入）”；
- 最稳方案：给图片加
loading="lazy"并预设width/height（哪怕只是占位比例），让容器高度可预测 - iframe必须设
width和height内联样式，否则scrollHeight返回0 - 不用等
load事件再调用bs.collapse，太重；改用ResizeObserver监听内容尺寸稳定后再触发重绘（仅需3行JS）
复杂点在于：动画时机和DOM渲染节奏必须卡准。很多人试过setTimeout延时，但不同设备、不同资源加载速度差异大，靠猜不如用ResizeObserver盯住真实尺寸变化。
