Bootstrap中如何构建点击展开更多内容的交互？其逻辑有何优劣？

本文共计809个文字，预计阅读时间需要4分钟。

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 属性。