Bootstrapmade模板移动端navbar点击无响应故障排查

按优先级从高到低排查以下问题，覆盖该模板该故障的全部已知诱因：

• 依赖加载异常
  该模板移动端导航基于Bootstrap 5 Collapse组件+模板内置main.js逻辑实现，加载顺序错误、文件缺失会直接导致功能失效：

  1. 确认页脚脚本加载顺序为：bootstrap.bundle.min.js → 模板原生assets/js/main.js → 自定义JS文件，顺序颠倒会导致事件绑定失败
  2. 禁止额外引入jQuery、低版本Bootstrap脚本，版本冲突会直接打断Bootstrap组件的事件监听
  3. 打开浏览器开发者工具的网络面板，确认上述两个核心JS文件返回状态为200，不存在路径错误404的情况

• DOM绑定属性不匹配
  修改header结构时很容易误改绑定属性，逐一核对以下代码片段：
  汉堡触发按钮必须携带完整Bootstrap5触发属性，不能缺项、不能用旧版Bootstrap写法：

  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false">
    <i class="bi bi-list mobile-nav-toggle"></i>
  </button>
  

  导航折叠容器必须和按钮的target选择器完全对应：

  <div class="collapse navbar-collapse" id="navbarNav">
    <!-- 导航链接列表 -->
  </div>
  

  高频错误点：

  • 把Bootstrap5要求的data-bs-toggle/data-bs-target写成旧版的data-toggle/data-target，缺少bs-前缀会导致组件完全无法识别触发指令
  • 按钮data-bs-target的选择器值和折叠容器的id不匹配，比如修改了容器id但没同步更新target值
  • 误删按钮内部图标上的mobile-nav-toggle类名，会导致模板main.js里的移动端导航样式切换逻辑失效

• 自定义样式/脚本阻断

  1. 打开浏览器控制台，点击汉堡按钮时如果出现红色JS报错，优先修复报错：如果是自定义JS存在语法错误，会直接阻断后续所有JS逻辑执行，包括导航的事件绑定
  2. 检查自定义CSS中是否存在针对.navbar-collapse的display: none !important、visibility: hidden、opacity: 0这类强制隐藏规则，这类规则优先级高于Bootstrap的展开类，会导致JS触发展开后内容依然不可见
  3. 临时注释全部自定义CSS和自定义JS，测试模板原生导航功能是否正常，如果恢复正常就逐段放开自定义代码定位冲突点

• 点击事件被遮挡
  如果给导航栏加了固定定位、毛玻璃效果等自定义样式，检查是否存在透明遮罩层、其他定位元素层级高于汉堡按钮，导致点击事件无法落到按钮上：临时给按钮加样式position: relative; z-index: 9999;测试，如果点击恢复正常，调整各层元素的z-index值即可。

排查提示：优先看控制台JS报错，再核对属性匹配，最后查样式冲突，95%以上的同类故障可在10分钟内定位。

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