根本原因是自定义css强制设置display: block或display: none，覆盖了bootstrap js动态注入的内联样式；collapse依赖js切换.show类并写入style="display: block/none"，而高优先级css会锁死该属性，导致视觉无变化。
为什么 collapse 显示但收不回去
根本原因是自定义 CSS 强制设置了 display: block 或 display: none，覆盖了 Bootstrap JS 动态注入的内联样式。Collapse 组件靠 JS 切换 .show 类并写入 style="display: block" 或 style="display: none" 来控制显隐；一旦你在 CSS 里用 ID 或类直接设 display，它就会以更高优先级锁死状态，JS 尝试改也改不动。
常见触发点：
- 在媒体查询中写了
#navbarSupportedContent { display: block; } - 用了
.collapse { display: none !important; }这类暴力重置 - 自定义下拉菜单时，对
.dropdown-menu.show直接设display: block，打断了 Bootstrap v5.3+ 内置的opacity过渡链
data-bs-toggle 和 display 冲突的典型组合
即使 data-bs-toggle="collapse" 写对了，只要 CSS 层面存在 display 干预，点击后 DOM 可能看似响应（aria-expanded 翻转、.show 类增删），但视觉上毫无变化——因为 display 被你的规则钉死了。
这时你会看到：
- 控制台无报错，网络请求正常，
bootstrap.bundle.min.js已加载 -
aria-expanded在 true/false 间切换，说明 JS 事件绑定成功 - 但目标元素的
style属性始终为空，或始终是display: block（被 CSS 覆盖） - 手动删掉你写的那条
display规则，立刻恢复正常
想加过渡效果，别碰 display
Bootstrap v5.3+ 的 .dropdown-menu 和折叠容器默认已启用 opacity + visibility 过渡，前提是：你没用 display 破坏它。
正确做法是移除所有对 .collapse、.dropdown-menu 或具体 ID 的 display 声明，改用：
-
visibility: hidden/visibility: visible -
opacity: 0/opacity: 1 - 配
transition: opacity 0.2s, visibility 0.2s
注意：visibility 本身不可过渡，但配合 opacity 可实现“渐隐+消失”效果，且不会干扰 JS 对 display 的控制权。
检查顺序比修复更关键
真出问题时，90% 的人先翻 JS 是否引入、data 属性是否拼错——但真正卡住的，往往是开发者工具里「Computed」面板中那一行灰掉的 display: block，来源写着「your-styles.css:142」。它不报错、不警告，只安静地让 collapse 失效。
建议排查路径：
- 打开浏览器开发者工具 → Elements → 找到折叠容器（如
#navbarSupportedContent）→ 右侧 Computed 面板搜display - 看哪条 CSS 规则生效，特别留意带媒体查询、ID 选择器或
!important的 - 临时禁用可疑规则，观察 collapse 是否恢复
display 属性的冲突极难复现、极易忽略，它不抛异常，只默默接管控制权。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
