为何点击Bootstrap导航栏内标签面板项时菜单会折叠关闭？

这个问题我之前做项目时也踩过坑，本质是Bootstrap导航栏的折叠机制和你嵌套的标签页点击事件冲突了，我来给你拆解下原因和解决办法：

核心原因 #

Bootstrap的navbar-collapse组件为了优化移动端体验，默认监听了文档范围内的点击事件：

• 当你点击折叠菜单外部的区域，或者菜单内部的可交互元素（比如<a>标签）时，组件会自动触发折叠关闭的逻辑，方便用户在选择选项后收起菜单。
• 你嵌套在下拉菜单里的标签页<a>标签，哪怕设置了data-toggle="tab"，它本质还是一个链接元素。点击时会触发默认的链接行为（哪怕href="#"只是锚点跳转），同时这个点击事件会向上冒泡到导航栏的折叠监听事件上，被误判为“需要关闭折叠菜单”的操作，所以菜单就自动收起来了。

解决办法 #

我们只需要阻止标签页链接的默认行为，同时不让事件冒泡到父级的导航栏折叠组件即可，有两种简单的实现方式：

方式1：用JavaScript绑定事件处理 #

给所有标签页的<a>标签添加点击事件，手动拦截不必要的行为：

$('.nav-tabs a').on('click', function(e) {
  // 阻止链接的默认跳转行为
  e.preventDefault();
  // 阻止事件向上冒泡，避免触发导航栏折叠关闭
  e.stopPropagation();
  // 手动触发标签页切换逻辑
  $(this).tab('show');
});

方式2：直接在HTML里添加inline事件处理 #

如果你不想额外写JS，也可以直接在标签页的<a>标签上添加onclick属性：

<ul class="nav nav-tabs">
  <li class="active">
    <a role="tab" data-toggle="tab" href="#tab1" onclick="event.preventDefault(); event.stopPropagation();">Tab 1</a>
  </li>
  <li>
    <a role="tab" data-toggle="tab" href="#tab2" onclick="event.preventDefault(); event.stopPropagation();">Tab 2</a>
  </li>
</ul>

小提示 #

不管你用的是Bootstrap 3、4还是5版本，这个冲突的核心逻辑都是一样的，上面的两种方案都能解决问题。如果你的标签页是动态生成的，记得用事件委托的方式绑定JS事件，避免失效哦~

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