Bootstrap 5折叠失效主因是data-bs-toggle和data-bs-target属性写错或缺失，必须严格配对且ID逐字符一致；未引入bootstrap.bundle.min.js、目标元素缺collapse类或CSS干扰max-height也会导致静默失效。
data-bs-toggle 和 data-bs-target 写错就完全没反应
Bootstrap 5 的 Collapse 组件根本不会监听 data-toggle 或 data-target，写错前缀等于没写。按钮能点击，DOM 没任何变化，控制台也安静得可怕——这是最典型的“静默失效”。
必须严格配对：
-
data-bs-toggle="collapse"（不能是data-bs="toggle"、data-toggle或漏掉bs-） -
data-bs-target="#myCollapse"（#开头，ID 必须与目标元素的id属性值**逐字符一致**：大小写、连字符、空格都不能差）
常见翻车点：data-bs-target="#mycollapse"（小写 c）、data-bs-target="#my-collapse "（末尾多空格）、href="#myCollapse"（Bootstrap 5+ 已不支持 href 触发）。
目标元素没加 collapse 类或 ID 不匹配
JS 不是靠 class 名“猜”目标，而是靠 data-bs-target 查找对应 id 的元素，再检查它是否含 collapse 类。两者缺一不可。
确保目标容器同时满足：
- 有
id="myCollapse"（和data-bs-target的值完全一致） - 有
class="collapse"（顺序无关，但不能漏；写成class="navbar-collapse"却没collapse就不行） - 初始状态不含
show类（否则一加载就展开，掩盖了 toggle 失效问题）
用浏览器开发者工具检查最终渲染的 HTML，别信编辑器里的模板——服务端渲染、JS 动态插入都可能让实际 DOM 和预期不一致。
bootstrap.bundle.min.js 没加载或加载太早
Collapse 是纯 JS 行为，只引 CSS 文件，它连动都不会动。而且 Bootstrap 5 的 JS 强依赖 Popper，必须用 bootstrap.bundle.min.js（不是 bootstrap.min.js），否则 collapse 实例根本初始化不了。
关键操作：
- 把
<script>标签移到</body>前，确保 DOM 已就绪 - 删掉
<head>里重复的 JS 引入，避免冲突 - 打开浏览器网络面板，确认
bootstrap.bundle.min.js状态码是 200，不是 404 或被广告拦截器屏蔽 - 别同时引
bootstrap.bundle.min.js和单独的@popperjs/core，会报Popper is already loaded
max-height 或 overflow 干扰了动画
Collapse 动画靠 JS 计算 scrollHeight 后插值设置 height，全程依赖 max-height 过渡。如果目标元素或其父容器设置了 max-height: 200px、overflow: hidden 或 height: auto，动画就会卡住或内容被裁切。
排查重点：
- 检查
.collapse.show是否被自定义 CSS 覆盖了max-height（尤其注意媒体查询里写的#navbarSupportedContent { max-height: 300px }） - 确认目标元素没设
overflow: hidden或position: absolute（会让内容脱离文档流，scrollHeight计算失真） - 临时加
style="transition: none"到目标元素上，看能否完整展开——能，说明就是max-height不够大
稳妥修复：.collapse.show { max-height: 120vh !important; }，用 vh 适配不同屏幕，!important 确保压过默认值。
最容易被忽略的是：CSS 层面的 display 或 max-height 覆盖，它不会报错，但会让 JS 的状态切换彻底失效。动手改之前，先用 DevTools 看一眼计算后的 display 和 max-height 值是不是被你的样式锁死了。
