Bootstrap 的 collapse 插件需手动处理动态内容、iOS Safari 高度计算错误、安卓点透、data-bs-target 混用问题及状态判断陷阱，复杂场景建议改用 CSS 方案。
Bootstrap 本身不提供“点击展开更多内容”的原生语义组件，但可以通过 collapse 插件 + 手动触发实现。它不是纯 CSS 方案，依赖 JavaScript 控制显隐，这点容易被误当成“开箱即用”的折叠功能。
collapse 展开后内容高度计算不准，iOS Safari 常见滚动跳变
这是最常被忽略的兼容性问题：当 collapse 内容动态加载（比如异步填充 HTML）或含图片未加载完成时，scrollHeight 计算会出错，导致动画卡在半途、父容器不重绘、甚至点透到下方元素。
- 务必在
show.bs.collapse事件中检查内容是否已就绪，必要时用offsetHeight或getBoundingClientRect()强制触发布局 - 对含图片的内容，监听
img.onload后再调用$().collapse('show')，或给图片加loading="lazy"并预设宽高 - 安卓 WebView 中若出现点透，尝试给折叠容器加
style="transform: translateZ(0)"强制硬件加速
data-bs-target 和 href="#id" 混用会导致事件绑定失败
Bootstrap 5+ 要求触发器必须明确指向目标元素 ID，且目标需有 id 属性。常见错误是把 href="#section1" 和 data-bs-target="#section1" 同时写在一个按钮上——这会让 Bootstrap 重复绑定，最终只响应其中一个。
- 统一使用
data-bs-toggle="collapse" data-bs-target="#myCollapse"，移除href - 目标元素必须同时带
id="myCollapse"和class="collapse"，缺一不可 - 如果目标是多个元素，用逗号分隔：
data-bs-target="#a,#b,#c"，但注意它们会同步展开/收起
手动控制 collapse 状态时，isShown 判断不可靠
$('.my-collapse').hasClass('show') 是安全判断方式；而 $('.my-collapse').data('bs.collapse')._isShown 在某些版本中可能滞后于 DOM 状态，尤其在快速连续点击时。
- 避免直接读取私有属性
_isShown，改用$(el).hasClass('show')或$(el).is(':visible') - 需要回调逻辑时，优先监听
shown.bs.collapse/hidden.bs.collapse事件，而非轮询状态 - 如果要禁用默认动画，设置
data-bs-animation="false"，但注意这会跳过 height 过渡，需自行补overflow: hidden防止内容溢出
真正难处理的不是怎么写，而是内容动态变化后 collapse 的生命周期管理——比如展开中插入新 DOM、或 collapse 区域内有第三方组件（如地图、图表），它们往往有自己的渲染节奏，和 Bootstrap 的 height 动画不同步。这时候得放弃 collapse，改用 CSS max-height + transition 手动控制，或者用 display: grid 配合 grid-template-rows 动画，反而更可控。
