HTML导航栏Toggle按钮无法收起，疑似与弹窗功能冲突求排查

• 第一步：先确认基础依赖引入顺序正确，必须先引入jQuery，再引入Bootstrap的JS文件，Bootstrap的collapse交互完全依赖这两个文件的加载顺序，顺序错误会导致组件状态切换异常。
• 第二步：排查事件冲突，这是弹窗导致问题的核心排查点：
  • 先注释掉所有弹窗相关的JS代码，测试Toggle是否能正常收起，如果恢复正常则确认是弹窗逻辑导致的冲突
  • 重点检查弹窗代码中是否存在全局点击事件绑定，是否调用了e.stopPropagation()、e.preventDefault()或者return false阻止了事件冒泡/默认行为，这类代码会干扰Bootstrap全局绑定的[data-toggle]事件监听，导致第二次点击无法触发收起逻辑
  • 检查是否有第三方弹窗插件和Bootstrap的data-api存在监听冲突，Bootstrap默认会全局监听所有带data-toggle属性的元素点击事件，如果其他插件也监听了相同属性的事件，会导致状态切换逻辑冲突
• 第三步：手动绑定切换逻辑规避冲突，如果确认是事件冲突且无法定位具体冲突代码，可以直接添加以下JS代码强制控制collapse切换：

$('.navbar-toggle').off('click').on('click', function () {
  const targetEl = $($(this).data('target'))
  targetEl.collapse('toggle')
})

• 第四步：排查样式覆盖问题，检查自定义CSS是否修改了Bootstrap自带的.collapse、.collapse.in、.collapsing类的display、height属性，异常的样式覆盖会导致切换动画/状态失效。

内容的提问来源于stack exchange，提问作者xiaoxiaoyao2828