Bootstrap 4下拉菜单内嵌Tabs点击失效问题求解决方案

我完全懂你碰到的这个坑——为了不让下拉菜单在点击内部Tabs时自动关闭，你给.dropdown-menu加了事件阻止，但结果把Tabs的切换功能也给弄哑了。这问题其实出在事件阻止的方式不对，咱们一步步来解决：

问题根源 #

你原来的JS代码同时用了e.stopPropagation()和e.preventDefault()，还监听了click.bs.dropdown这个Bootstrap内部命名空间的事件：

$('.dropdown-menu').on("click.bs.dropdown", function (e) { e.stopPropagation(); e.preventDefault(); });

这里的问题有两个：

1. e.preventDefault()会阻止所有点击元素的默认行为，包括Tabs组件依赖的<a>标签点击逻辑，导致Tabs切换事件无法正常触发。
2. 监听click.bs.dropdown这个内部事件，会干扰Bootstrap Dropdown的原生处理流程，反而容易引发冲突。

可行解决方案 #

只需要调整事件监听的方式，只阻止事件冒泡到document（避免下拉菜单关闭），但保留内部事件的正常传播（让Tabs能切换）：

方案一：简化事件阻止逻辑 #

把JS代码改成这样：

$('.dropdown-menu').on('click', function(e) {
  e.stopPropagation(); // 仅阻止事件冒泡到父级，不影响内部Tabs事件
});

这个方案的原理是：

• Bootstrap的Dropdown是通过监听document上的点击事件来关闭下拉菜单的，我们阻止.dropdown-menu内的点击事件冒泡到document，就能避免下拉关闭。
• 同时不阻止事件在.dropdown-menu内部的传播，Tabs组件的点击事件会正常触发（因为Tabs的事件绑定在.nav-link上，事件会先触发Tabs的切换逻辑，再冒泡到.dropdown-menu被阻止）。

方案二：针对Tabs单独处理（备选） #

如果方案一还是有问题，可以直接给Tabs的点击事件单独处理，确保切换逻辑执行：

// 手动触发Tabs切换，并阻止冒泡
$('.dropdown-menu .nav-link[data-toggle="tab"]').on('click', function(e) {
  $(this).tab('show'); // 手动调用Tabs切换方法
  e.stopPropagation(); // 阻止事件冒泡，避免下拉关闭
});

// 处理下拉菜单内其他元素的点击，同样阻止冒泡
$('.dropdown-menu').on('click', function(e) {
  e.stopPropagation();
});

验证效果 #

修改后，点击Tabs的标签时：

1. Tabs会正常切换对应的内容面板
2. 下拉菜单不会自动关闭
3. 点击下拉菜单外部时，仍然会正常关闭下拉（符合Bootstrap的原生行为）

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