Bootstrap4实现点击下拉菜单链接后阻止菜单自动关闭

问题表现 #

在Bootstrap4项目中开发下拉导航菜单，自适应小屏幕视图下，点击汉堡菜单按钮展开导航栏后，点击一级下拉选项准备查看二级下拉内容时，整个下拉导航菜单会异常自动关闭。

问题对应业务代码 #

<nav class="navbar navbar-expand-lg navbar-header">
    <div class="container">
    <div class="navbar-translate">
      <a class="navbar-brand" href="./" rel="tooltip" title="Казахстанский инженерно-технологический университет" data-placement="bottom">
        <img src="assets/img/logo_new.png" width="180">
      </a>
      <button class="navbar-toggler navbar-toggler" type="button" data-toggle="collapse" data-target="#navigation" aria-controls="navigation-index" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-bar bar1"></span>
        <span class="navbar-toggler-bar bar2"></span>
        <span class="navbar-toggler-bar bar3"></span>
      </button>
    </div>
    <div class="collapse navbar-collapse" style="background-color: white;" id="navigation">
      <ul class="navbar-nav mr-auto" id="testing">
        <div class="nav-item dropdown">
          <a class="nav-link dropdown-toggle myclass" data-toggle="dropdown" href="#" id="dropdownMenuButton" role="button" aria-haspopup="true" aria-expanded="false"><?=$m_admission[$_SESSION['lang']]?></a>
          <ul class="dropdown-menu">
            <a class="dropdown-item" href="?page=undergraduate"> <?=$b_undergraduate[$_SESSION['lang']]?> </a>
            <a class="dropdown-item" href="?page=graduate"> <?=$b_graduate[$_SESSION['lang']]?> </a>
            <a class="dropdown-item" href="https://kazetu.edu.kz/sites/dl/" target="_blank"> <?=$b_distance_learning[$_SESSION['lang']]?> </a>
            <a class="dropdown-item" href="https://college.kazetu.edu.kz/"> <?=$b_college[$_SESSION['lang']]?> </a>
            <a class="dropdown-item" href="https://zerde.kazetu.kz/?lang=ru" target="_blank"> <?=$zerde_kazetu_reg[$_SESSION['lang']]?> </a>
          </ul>
        </div>
      </ul>
    </div>
  </div>
</nav>
</header>

问题原因 #

• HTML结构不符合Bootstrap4导航规范：<ul class="navbar-nav">的直接子元素必须是<li class="nav-item">，代码中错误使用<div>作为下拉项容器，会导致组件事件绑定、冒泡逻辑异常。
• 事件冒泡未拦截：小屏幕下导航折叠容器（collapse）默认会监听内部点击事件触发折叠，点击一级下拉触发按钮时，点击事件会冒泡到外层collapse容器，直接触发菜单关闭，没有留给下拉菜单展开的执行时机。

修复方案 #

• 修正嵌套结构：将包裹下拉项的<div class="nav-item dropdown">替换为<li class="nav-item dropdown">，符合组件的DOM结构要求。
• 添加JS逻辑拦截小屏下下拉按钮的点击事件冒泡，避免触发外层collapse的关闭逻辑：

// 绑定导航下拉项点击事件
$('.navbar .dropdown-toggle').on('click', function(e){
  // 仅在lg断点以下（小屏移动端视图）生效
  if($(window).width() < 992){
    e.stopPropagation();
    // 手动切换二级下拉菜单的显隐
    $(this).siblings('.dropdown-menu').stop().slideToggle(200);
  }
})

• 可选优化：如果需要点击二级菜单项后保持导航展开，可给.dropdown-item也添加e.stopPropagation()阻止事件冒泡即可。

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