Bootstrap 5移动端导航栏点击菜单项后无法关闭问题求助

问题根源 #

Bootstrap 5的折叠导航组件默认仅在点击汉堡按钮或菜单外部区域时触发关闭逻辑。单页站内的锚点链接（指向页面ID）属于无刷新跳转，不会触发页面重载，因此折叠菜单的show类不会被自动移除，导致菜单保持展开状态。

有效解决方案 #

方案1：通过JavaScript手动触发菜单关闭

给所有导航内的锚点链接绑定点击事件，判断菜单状态后调用Bootstrap Collapse组件的关闭方法：

// 替换#navbarNav为你实际的折叠菜单容器ID
const collapseElement = document.getElementById('navbarNav');
const collapseInstance = new bootstrap.Collapse(collapseElement, { toggle: false });

// 监听所有锚点链接点击
document.querySelectorAll('.navbar-nav .nav-link[href^="#"]').forEach(link => {
  link.addEventListener('click', () => {
    if (collapseInstance._isShown()) {
      collapseInstance.hide();
    }
  });
});

注意：确保你的折叠菜单容器有正确的ID（通常是navbarSupportedContent或自定义ID），并且已经引入Bootstrap的JS文件。

方案2：利用Bootstrap内置的data属性快速实现

直接在锚点链接上添加data-bs-toggle="collapse"和data-bs-target属性，让点击事件同时触发锚点跳转和菜单折叠：

<!-- 替换#navbarNav为你的折叠菜单容器ID -->
<a class="nav-link" href="#about" data-bs-toggle="collapse" data-bs-target="#navbarNav">关于我们</a>

该方法无需额外编写JS，适合结构简单的导航栏。如果担心菜单收起时误触展开，可结合方案1的状态判断逻辑优化。

方案3：排查JavaScript冲突

若上述方法无效，需检查页面内是否存在其他JS代码（如jQuery、自定义事件绑定）干扰Bootstrap的折叠事件：

• 临时移除非必要的JS文件，仅保留Bootstrap 5的JS，测试是否恢复正常
• 检查是否有preventDefault()或stopPropagation()阻止了事件冒泡，导致Bootstrap的折叠逻辑未触发

临时方案的弊端 #

将锚点改为完整URL通过刷新页面关闭菜单的方法，会破坏单页网站的流畅性，且用户体验较差，不建议作为长期解决方案。

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