Bootstrap折叠导航栏中Dropdown点击后关闭导航栏的问题

问题分析 #

当导航栏处于折叠状态时，点击下拉菜单触发按钮后整个折叠菜单意外关闭，核心原因是下拉按钮的点击事件向上冒泡，触发了折叠容器的关闭逻辑。此外你的HTML结构存在未闭合标签，也可能导致功能异常。

修复步骤 #

1. 修正HTML结构错误 #

代码中class="nav-item dropdown zakldropdown"的<li>标签未闭合，导致DOM结构混乱。需在下拉菜单的</ul>后添加</li>闭合标签，修正后的完整代码如下：

<nav class="navbar navbar-expand-xl navbar-light sticky-top py-3 d-block" data-navbar-on-scroll="data-navbar-on-scroll">
  <div class="container">
    <a class="navbar-brand" href="index.html"><img src="assets/img/gallery/logo-n.png" height="45" alt="logo" /></a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse border-top border-lg-0 mt-4 mt-lg-0" id="navbarSupportedContent">
      <ul class="navbar-nav ms-auto pt-2 pt-lg-0 font-base">
        <li class="nav-item px-2"><a class="nav-link active" aria-current="page" href="index.html">Domů</a></li>
        <li class="nav-item dropdown zakldropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Základní škola
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
            <li><a class="dropdown-item" href="#">Chrakteristika ZŠ</a></li>
            <li><a class="dropdown-item" href="#">Organizace školního roku</a></li>
            <li><a class="dropdown-item" href="#">Školská rada</a></li>
          </ul>
        </li> <!-- 新增：闭合下拉菜单的父li标签 -->
        <li class="nav-item px-2"><a class="nav-link" aria-current="page" href="web-development.html">Mateřská škola</a></li>
        <li class="nav-item px-2"><a class="nav-link" aria-current="page" href="user-research.html">Jídelna</a></li>
        <li class="nav-item px-2"><a class="nav-link" aria-current="page" href="user-research.html">EKOškola MŠ a ZŠ</a></li>
        <li class="nav-item px-2"><a class="nav-link" aria-current="page" href="user-research.html">Družina</a></li>
        <li class="nav-item px-2"><a class="nav-link" aria-current="page" href="user-research.html">Málinka z. s.</a></li>
        <li class="nav-item px-2"><a class="nav-link" aria-current="page" href="user-research.html">Dokumenty</a></li>
        <li class="nav-item px-2"><a class="nav-link" aria-current="page" href="user-research.html">Kontakty</a></li>
      </ul>
    </div>
  </div>
</nav>

2. 阻止下拉按钮的事件冒泡 #

修正结构后，通过以下方式阻止下拉按钮的点击事件向上传播，避免触发折叠容器的关闭：

方式一：内嵌事件处理（简洁版）

直接在下拉按钮标签上添加onclick="event.stopPropagation()"：

<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false" onclick="event.stopPropagation()">
  Základní škola
</a>

方式二：独立JavaScript代码（模块化）

document.querySelectorAll('.navbar-collapse .dropdown-toggle').forEach(toggle => {
  toggle.addEventListener('click', function(e) {
    // 仅在导航栏处于折叠状态时阻止冒泡
    if (!document.querySelector('.navbar-toggler').classList.contains('collapsed')) {
      e.stopPropagation();
    }
  });
});

原理说明 #

• 结构修正：确保DOM层级正确，避免浏览器解析错误导致的功能异常。
• 阻止事件冒泡：下拉按钮的点击事件默认会向上传递到父级折叠容器，触发Bootstrap内置的折叠关闭逻辑；通过stopPropagation()截断事件传递，仅触发下拉菜单的展开/收起，不影响整个折叠导航的状态。

内容的提问来源于stack exchange，提问作者Tomáš Maixner