jQuery Bootstrap多级下拉菜单鼠标悬停交互异常问题求助

问题描述 #

页面加载时所有.test链接的下拉菜单默认收起，悬停第一个.test元素时下拉展开/收起功能正常，但切换到第二个.test元素悬停时，之前展开的下拉菜单不会自动关闭，必须再次悬停该元素才能收起。

原代码 #

JavaScript #

$(document).ready(function(){
  $('.dropdown-submenu a.test').on("mouseover", function(e){
    $(this).next('ul').toggle();
    e.stopPropagation();
    e.preventDefault();
  });
});

CSS #

.dropdown-submenu {
  position: relative;
}

.dropdown-submenu .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -1px;
}

HTML #

<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
   
<div class="container">
  <h2>Multi-Level Dropdowns</h2>                                      
  <div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Tutorials
    <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li class="dropdown-submenu">
        <a class="test" tabindex="-1" href="#">HTML<span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a tabindex="-1" href="#">1st HTML</a></li>
          <li><a tabindex="-1" href="#">2nd HTML</a></li>
        </ul></li>
      <li class="dropdown-submenu">
        <a class="test" tabindex="-1" href="#">CSS<span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a tabindex="-1" href="#">1st CSS</a></li>
          <li><a tabindex="-1" href="#">2nd CSS</a></li>
        </ul></li>
      <li class="dropdown-submenu">
        <a class="test" tabindex="-1" href="#">New dropdown <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a tabindex="-1" href="#">2nd level dropdown</a></li>
          <li><a tabindex="-1" href="#">2nd level dropdown</a></li>
        </ul></li>
    </ul>
  </div>
</div>
</body>

解决方案 #

方案1：修改toggle逻辑，先关闭其他菜单 #

修改JavaScript代码，在触发当前元素悬停时，先关闭所有其他已展开的下拉菜单，再切换当前菜单的显示状态：

$(document).ready(function(){
  $('.dropdown-submenu a.test').on("mouseover", function(e){
    // 关闭所有非当前元素的下拉子菜单
    $('.dropdown-submenu a.test').not(this).next('ul').hide();
    // 切换当前下拉菜单的显示状态
    $(this).next('ul').toggle();
    e.stopPropagation();
    e.preventDefault();
  });
});

方案2：改用mouseenter/mouseleave事件，优化交互体验 #

如果希望鼠标离开元素时自动收起菜单，改用mouseenter和mouseleave事件，逻辑更清晰：

$(document).ready(function(){
  $('.dropdown-submenu a.test').on("mouseenter", function(e){
    // 关闭所有其他下拉子菜单
    $('.dropdown-submenu a.test').not(this).next('ul').hide();
    // 展开当前下拉菜单
    $(this).next('ul').show();
    e.stopPropagation();
    e.preventDefault();
  }).on("mouseleave", function(){
    // 鼠标离开时关闭当前下拉菜单
    $(this).next('ul').hide();
  });
});

原理说明 #

原代码仅对当前元素的下拉菜单执行toggle操作，未处理其他已展开的菜单，导致多个菜单同时显示。添加关闭其他菜单的逻辑后，确保同一时间只有一个下拉菜单处于展开状态，解决切换时的冲突问题。

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