Bootstrap 4：点击下拉菜单内标签页时菜单消失问题求助

嘿，这个问题我之前也踩过坑！Bootstrap的下拉菜单默认会在点击内部任意元素时关闭，原因是点击事件会冒泡到下拉容器，触发了Bootstrap内置的关闭逻辑。要解决这个，只需要阻止标签页点击事件的冒泡就行，具体操作看下面：

第一步：确认你的HTML结构 #

先确保下拉菜单和导航标签页的结构是正确的，示例如下：

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuBtn" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    下拉菜单
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuBtn">
    <!-- 导航标签页 -->
    <ul class="nav nav-tabs" id="tabMenu" role="tablist">
      <li class="nav-item">
        <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">首页</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">个人资料</a>
      </li>
    </ul>
    <!-- 标签页内容 -->
    <div class="tab-content p-3" id="tabContent">
      <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">这是首页标签的内容</div>
      <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">这是个人资料标签的内容</div>
    </div>
  </div>
</div>

第二步：添加JavaScript阻止事件冒泡 #

你只需要给标签页的链接添加点击事件，阻止事件向上冒泡到下拉容器即可，有两种方式可选：

方式1：直接绑定到静态标签链接 #

如果你的标签页是页面加载时就渲染好的，用这个方法更直接：

$('.dropdown-menu .nav-link').on('click', function(e) {
  e.stopPropagation(); // 阻止事件冒泡，避免触发下拉菜单的关闭逻辑
});

方式2：事件委托（适合动态生成的标签） #

如果你的标签页是后续通过JS动态添加到页面的，事件委托的方式更可靠：

$('.dropdown-menu').on('click', '.nav-link', function(e) {
  e.stopPropagation();
});

原理说明 #

Bootstrap的下拉组件会监听.dropdown-menu上的click事件，当事件冒泡到这里时，就会执行关闭菜单的操作。我们通过e.stopPropagation()阻止了事件向上传递，这样下拉菜单就不会在点击标签页时关闭了，同时标签页的切换功能也完全不受影响~

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