移动端Bootstrap汉堡菜单内二级下拉菜单无法展开问题

问题描述 #

为足球联赛搭建的响应式网站，在移动端分辨率下，汉堡菜单展开后点击包含球队列表的二级下拉菜单按钮，会直接关闭整个汉堡菜单，无法展开二级菜单。

解决方案 #

方法一：使用Bootstrap自带属性（推荐） #

给汉堡菜单对应的折叠容器添加data-bs-auto-close="outside"属性，设置折叠菜单仅在点击外部区域时关闭，内部点击下拉按钮不会触发关闭逻辑。

修改后的导航栏核心代码片段：

<div class="collapse navbar-collapse" id="navbarResponsive" data-bs-auto-close="outside">
    <ul class="navbar-nav text-uppercase ms-auto py-4 py-lg-0">
        <!-- 原有菜单内容保持不变 -->
    </ul>
</div>

方法二：阻止事件冒泡 #

若方法一不符合需求，可通过JavaScript阻止下拉按钮的点击事件向上冒泡，避免触发折叠菜单的关闭行为：

document.getElementById('navbarDarkDropdownMenuLink').addEventListener('click', function(e) {
    e.stopPropagation(); // 阻止事件向上传递
});

修改后的完整代码示例 #

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">

<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top" id="mainNav">
    <div class="container">
        <a class="navbar-brand" href="index.html"><img src="assets/img/team_logos/LOGO FINAL PNG.png" alt="JBPL logo"/></a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
            Menu
            <i class="fas fa-bars ms-1"></i>
        </button>
        <div class="collapse navbar-collapse" id="navbarResponsive" data-bs-auto-close="outside">
            <ul class="navbar-nav text-uppercase ms-auto py-4 py-lg-0">
                <li class="nav-item"><a class="nav-link" href="team.html">Teams</a></li>
                <li class="nav-item"><a class="nav-link" href="#portfolio">Something</a></li>
                <li class="nav-item"><a class="nav-link" href="#about">Else</a></li>
                <li class="nav-item"><a class="nav-link" href="#team">X</a></li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDarkDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                      Teams
                    </a>
                    <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="navbarDarkDropdownMenuLink">
                      <li><a class="dropdown-item nav-link" href="#">Mercury Wingers</a></li>
                      <li><a class="dropdown-item nav-link" href="#">Curry Blasters</a></li>
                      <li><a class="dropdown-item nav-link" href="#">Spice FC</a></li>
                      <li><a class="dropdown-item nav-link" href="#">Curry Blasters</a></li>
                      <li><a class="dropdown-item nav-link" href="#">Bomb Squad</a></li>
                      <li><a class="dropdown-item nav-link" href="#">Error 404</a></li>
                      <li><a class="dropdown-item nav-link" href="#">Invincible Knights</a></li>
                      <li><a class="dropdown-item nav-link" href="#">Space Monkey Mafia</a></li>
                      <li><a class="dropdown-item nav-link" href="#">Skull Crushers</a></li>
                      <li><a class="dropdown-item nav-link" href="#">Thunder Warriros</a></li>
                      <li><a class="dropdown-item nav-link" href="#">Fear Control</a></li>
                    </ul>
                  </li>
            </ul>
        </div>
    </div>
</nav>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>

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