Bootstrap 5 的 collapse 插件通过 data-bs-toggle="collapse" 控制显隐最稳定，需配对触发按钮（含 data-bs-target）和目标容器（含 collapse 类及对应 id），并确保 JS 正确加载。
用 data-bs-toggle="collapse" 控制显隐最稳
bootstrap 5 内置的 collapse 插件就是干这事的，不用自己写 js 或 css 动画。核心是配对两个元素：触发按钮（带 data-bs-toggle="collapse"）和目标容器（带 collapse 类 + 唯一 id）。
常见错误是漏掉 data-bs-target 或写错 id 值，导致点击没反应；或者目标容器没加 collapse 类，动画不生效。
- 按钮必须有
data-bs-toggle="collapse"和data-bs-target="#xxx"（值要和目标id一致） - 目标容器必须有
class="collapse"，否则不会隐藏，也不会触发动画 - 如果想默认展开，给目标加
show类：class="collapse show" - 确保已加载 Bootstrap 的 JS 文件（
bootstrap.bundle.min.js或单独引入 Popper + Bootstrap JS）
<button class="btn btn-link" type="button" data-bs-toggle="collapse" data-bs-target="#more-content"> 展开详情 </button> <div class="collapse" id="more-content"> <p>这里是被隐藏的长内容……</p> </div>
点击后按钮文字动态切换（显示/隐藏）
原生 collapse 不管按钮文字，得靠 JS 监听事件手动切。监听 shown.bs.collapse 和 hidden.bs.collapse 这两个事件最可靠，比查 aria-expanded 更直接。
容易踩的坑是用 click 事件去 toggle 文字，但用户可能用键盘操作（空格/回车），或多次快速点击，状态容易不同步。
- 绑定到目标容器（
#more-content），不是按钮本身 - 用
textContent改文字，避免 XSS 风险；别用innerHTML - 按钮需有
aria-expanded属性，Bootstrap 会自动更新它，可用来辅助判断
const collapseEl = document.getElementById('more-content');
const toggleBtn = document.querySelector('[data-bs-target="#more-content"]');
collapseEl.addEventListener('shown.bs.collapse', () => {
toggleBtn.textContent = '收起详情';
});
collapseEl.addEventListener('hidden.bs.collapse', () => {
toggleBtn.textContent = '展开详情';
});
移动端点透、滚动错位这些兼容性问题
在 iOS Safari 或部分安卓 WebView 里，collapse 展开后内容高度变化，可能引发父容器未重绘、滚动位置跳变，甚至点透到下层元素。
根本原因是 collapse 用 height: 0 + overflow: hidden 实现，而某些浏览器对 height 动画的渲染不及时。
- 给目标容器加
will-change: height能缓解 iOS 渲染延迟 - 如果父容器有
overflow: hidden，展开时内容被截断，得改成overflow: visible或去掉 - 点透问题多出现在固定定位（
position: fixed）弹层里，可在展开时临时给 body 加pointer-events: none，但慎用——会影响所有交互 - 更稳妥的做法：用
max-height替代height动画（需自定义 CSS，放弃原生 collapse）
不用 JS 的纯 CSS 方案（仅限简单场景）
如果项目没引入 Bootstrap JS，或只想最小依赖，可以用 <details><summary></summary></details> 原生标签。它自带显隐逻辑、无障碍支持，且无需 JS。
缺点也很明显：样式完全不可控（尤其 <summary></summary> 的默认三角图标和点击区域），无法和 Bootstrap 按钮风格统一，也不支持平滑高度动画。
- 必须用
<details></details>包裹，<summary></summary>必须是第一个子元素 - 默认展开加
open属性：<details open></details> - 想改箭头图标得用
::marker伪元素，但兼容性有限（Safari 16.4+ 才支持自定义） - 动画只能靠
max-height+transition模拟，且需预设最大高度，不适合内容长度不确定的场景
<details><summary>点击显示更多</summary><p>纯 HTML/CSS 实现，无 JS 依赖。</p> </details>实际用
collapse 时，最常被忽略的是 JS 加载顺序和目标元素的初始类名——少一个 collapse，整个功能就静音了；多一个 show 又可能让首屏布局跳动。动手前先检查控制台有没有 Bootstrap's JavaScript requires Popper 这类报错。
