Bootstrap Navbar下拉菜单移动端点击后自动关闭问题排查求助

核心原因排查及对应解决方案 #

• 版本属性不匹配
  Bootstrap 4 使用 data-toggle / data-target 属性，Bootstrap 5 已将所有数据属性前缀改为 data-bs-*，混用两个版本的属性和资源会直接导致交互异常。
  如果你使用的是Bootstrap 5，将代码中所有对应属性替换即可：
  导航切换按钮替换示例：

  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
      aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
  </button>
  

  下拉菜单触发链接替换示例：

  <a class="page-scroll nav-link " href="#" id="navbarDropdown" data-bs-toggle="dropdown"
      aria-haspopup="true" aria-expanded="false"><i class="fa fa-newspaper-o"></i>WHAT WE DO</a>
  

• JS资源引入顺序错误/重复引入
  Bootstrap 4 依赖加载顺序为：jQuery → Popper.js → Bootstrap.min.js，顺序错误或者重复引入任意一个资源，都会导致点击事件被触发两次，出现展开后立刻关闭的问题，检查页面head和body底部的脚本引用，调整顺序、删除重复引用即可。
  Bootstrap 5 不需要引入jQuery，直接引入bootstrap.bundle.min.js即可，无需额外引入Popper.js。
• 自定义滚动脚本冲突
  你给导航链接添加了page-scroll类，对应的平滑滚动脚本如果监听了所有导航链接的点击事件，调用了e.preventDefault()或者e.stopPropagation()，会和Bootstrap的折叠逻辑冲突，只需要在滚动脚本的事件监听逻辑里，排除导航切换按钮和下拉触发元素即可。
• 自定义类逻辑冲突
  你给导航折叠容器添加了自定义的sub-menu-bar类，临时注释掉该类测试功能，如果恢复正常，说明该类对应的自定义样式或者JS逻辑和Bootstrap原生折叠逻辑冲突，排查对应代码即可。

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