Bootstrap 5 Navbar菜单切换器在移动浏览器中无法打开问题求助

排查解决步骤 #

• 先在移动设备开启无痕/隐私模式访问测试，排除浏览器缓存旧的CSS、JS文件的问题，绝大多数实机和DevTools表现不一致的问题都是缓存导致。
• 确认Bootstrap JS引入符合要求：
  • Bootstrap 5 交互组件依赖Popper.js，建议直接引入内置Popper的bootstrap.bundle.min.js，避免缺少依赖导致交互失效
  • JS文件必须放在页面所有DOM元素之后，也就是</body>闭合标签之前引入，不要放在head标签内，避免DOM未加载完成就初始化Bootstrap组件。
• 排查事件和样式冲突：
  • 检查自定义JS中是否有给.navbar-toggler或导航栏父级元素绑定点击事件，且调用了e.stopPropagation()、e.preventDefault()，这类代码会阻止Bootstrap默认的折叠事件触发
  • 确认自定义CSS没有给.navbar-collapse添加display: none !important这类强制覆盖的样式，导致Bootstrap添加的show类不生效
• 移动端远程调试定位：
  安卓设备开启USB调试后连接电脑，访问Chrome的chrome://inspect页面，直接远程调试移动端页面，点击汉堡按钮后查看控制台是否有报错，同时观察#navbarNavDropdown元素是否被添加show类，可以直接定位是事件未触发还是样式被覆盖。

临时兼容方案 #

如果排查后未找到根因，可以直接添加以下JS手动实现折叠逻辑，不会影响原有功能：

document.querySelector('.navbar-toggler').addEventListener('click', function() {
  const targetEl = document.querySelector(this.dataset.bsTarget);
  targetEl.classList.toggle('show');
  this.setAttribute('aria-expanded', targetEl.classList.contains('show'));
});

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