移动端折叠导航菜单点击链接后无法关闭问题排查求助

数据老陈

2026-5-15

解决移动端折叠导航点击链接后不关闭的问题

从你提供的导航代码来看，这个问题的核心是Bootstrap的navbar组件默认没有绑定点击菜单链接后关闭折叠面板的行为——只有点击触发折叠的汉堡按钮时，才会切换菜单的展开/收起状态。下面是具体的分析和解决方案：

问题原因

你的代码里使用了Bootstrap的navbar-collapse组件，当在移动端触发菜单展开后，菜单内的<a>标签并没有关联关闭折叠面板的事件，所以点击链接后菜单会保持展开状态。

解决方案

我们可以通过添加自定义JavaScript代码，给导航链接绑定点击事件，在点击时自动关闭折叠菜单。

基础实现代码

首先确保你的页面已经加载了jQuery和Bootstrap的JS文件（这是Bootstrap组件正常工作的前提），然后添加以下代码：

// 监听所有导航链接的点击事件
$('.navbar-nav a').on('click', function() {
  // 获取折叠菜单容器
  const $collapseMenu = $('#navbar');
  // 判断菜单是否处于展开状态（Bootstrap用"in"类标识展开）
  if ($collapseMenu.hasClass('in')) {
    // 调用Bootstrap的collapse方法关闭菜单
    $collapseMenu.collapse('hide');
  }
});

优化版（兼容下拉菜单）

如果你的导航里有下拉菜单（比如代码中的Blog下拉项），你可能不希望点击下拉按钮时关闭菜单，这时可以调整选择器，只给非下拉的链接绑定事件：

// 只监听非下拉按钮的导航链接
$('.navbar-nav > li > a:not(.dropdown-toggle)').on('click', function() {
  const $collapseMenu = $('#navbar');
  if ($collapseMenu.hasClass('in')) {
    $collapseMenu.collapse('hide');
  }
});