根本原因是css中transition声明导致延迟，visibility无法被动画化但浏览器仍等待过渡结束；最有效解法是直接删除所有涉及.navbar-collapse、.collapse或.navbar的transition规则。
为什么 navbar-collapse 关闭时有延迟
根本原因不是 JS 执行慢，而是 CSS 里写了 transition: all .5s ease 或类似声明，作用在 .navbar-collapse 或其父容器上。visibility 属性本身不能被 transition 动画化，但浏览器仍会等待整个过渡周期结束才真正移除或隐藏元素，造成“点了按钮，菜单却等半秒才消失”的错觉。
直接删掉 transition 相关声明
这是最有效、副作用最小的解法。别试图“优化”它，直接移除所有涉及 .navbar-collapse、.collapse 或 .navbar 的 transition 声明：
- 检查自定义 CSS 文件中是否有类似
.navbar-collapse { transition: visibility .3s, opacity .3s; }的规则，删掉 - Bootstrap 默认 CSS 中一般不带这类 transition，所以大概率是你或团队加的
- 如果用了第三方主题或 UI 库，搜索
navbar和transition关键词，定位并注释掉
用 display 切换代替 visibility + opacity 组合
如果你确实需要淡出效果，不要依赖 visibility 过渡。改用 opacity + display 配合 JS 控制：
- 初始状态设为
opacity: 0; display: none; - 展开时：先
display: block（瞬间生效），再加opacity: 1并配transition: opacity .2s - 关闭时：先
opacity: 0，监听transitionend事件，结束后再设display: none - 避免对
height或max-height做过渡——计算开销大，且容易因内容高度不确定而失效
JS 切换逻辑必须和 CSS 状态严格匹配
常见错误是 JS 调用 bootstrap.Collapse 实例的 hide() 后，没等 transition 结束就手动操作 DOM，或者多个地方重复触发 show/hide，导致状态错乱：
- 确认只在一个地方初始化 collapse：比如
new bootstrap.Collapse(element)，不要重复 new - 禁用默认切换行为：移除
data-bs-toggle="collapse"，改用 JS 显式控制，避免 click 事件被多次绑定 - 如果用了 jQuery 版本，注意
$().collapse('hide')是异步的，别在它后面立刻读取offsetHeight等布局属性
transition。删了它，比调任何参数都管用。
