Bootstrap 4嵌套下拉菜单点击无法关闭问题求助

我帮你排查了这个嵌套下拉菜单的问题，核心原因是Bootstrap 4原生下拉组件没有处理嵌套结构的关闭逻辑——默认的下拉事件只会触发最外层菜单的状态切换，嵌套的子菜单点击后无法触发自身的关闭动作，也不会联动父级菜单的状态。

解决方案 #

咱们可以通过自定义JavaScript事件监听，结合Bootstrap的样式规则来实现完整的展开/关闭功能，同时支持点击页面其他区域关闭所有下拉菜单。

1. 核心JavaScript逻辑 #

这段代码会处理子菜单的点击切换，以及全局点击关闭的逻辑：

// 处理嵌套子菜单的点击切换
$(document).on('click', '.dropdown-submenu a[data-toggle="dropdown"]', function(e) {
  const $currentSubmenu = $(this).closest('.dropdown-submenu');
  const $targetMenu = $currentSubmenu.find('.dropdown-menu');

  // 关闭当前子菜单的同级子菜单
  $currentSubmenu.siblings('.dropdown-submenu').find('.dropdown-menu').removeClass('show');
  // 切换当前子菜单的显示状态
  $targetMenu.toggleClass('show');

  // 阻止事件冒泡，避免触发父级下拉的默认行为
  e.stopPropagation();
  e.preventDefault();
});

// 点击页面空白区域关闭所有下拉菜单
$(document).on('click', function(e) {
  if (!$(e.target).closest('.dropdown').length) {
    $('.dropdown-menu.show').removeClass('show');
  }
});

2. 配套样式调整（可选） #

如果子菜单的位置显示不对，可以添加以下CSS来优化布局：

.dropdown-submenu {
  position: relative;
}

.dropdown-submenu .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -6px;
  margin-left: -1px;
  border-radius: .25rem;
}

修改后的完整代码示例 #

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    主菜单
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">普通菜单项</a>
    <div class="dropdown-submenu">
      <a class="dropdown-item dropdown-toggle" href="#" data-toggle="dropdown">嵌套子菜单</a>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">子菜单项1</a>
        <a class="dropdown-item" href="#">子菜单项2</a>
        <div class="dropdown-submenu">
          <a class="dropdown-item dropdown-toggle" href="#" data-toggle="dropdown">二级嵌套菜单</a>
          <div class="dropdown-menu">
            <a class="dropdown-item" href="#">二级子菜单项1</a>
            <a class="dropdown-item" href="#">二级子菜单项2</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- 引入jQuery和Bootstrap 4的JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/js/bootstrap.bundle.min.js"></script>

这样修改后，你就能实现：

• 点击嵌套子菜单的触发按钮，展开/关闭对应的子菜单
• 打开一个子菜单时，自动关闭同级的其他子菜单
• 点击页面空白区域，关闭所有已展开的下拉菜单

内容的提问来源于stack exchange，提问作者L.S