hover父元素打开子div并关闭其余子div的Javascript实现问题

实现方案 #

你需要在每次触发父元素hover事件时，先关闭所有非当前父元素对应的子菜单，无需设置移出时的关闭逻辑即可满足需求。

代码修改 #

1. JavaScript代码调整

$('li.menu-item-has-children').hover(function () {
  // 获取当前hover元素对应的子菜单
  const $currentDropdown = $(this).find('ul.dropdown-menu-main');
  // 关闭所有非当前的子菜单，同时停止未完成动画避免堆叠
  $('ul.dropdown-menu-main').not($currentDropdown).stop(true, true).fadeOut('slow').css('z-index', '-1');
  // 打开当前子菜单并提高层级避免被覆盖
  $currentDropdown.stop(true, true).fadeIn('slow').css('z-index', '10');
});

2. HTML代码修正

你原有HTML存在标签闭合错误，a标签错误使用了</div>闭合，修正后代码如下：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li class="menu-item-has-children">
    <a href="#">Main 1</a>
    <ul class="dropdown-menu-main">
      <li>Sub 1</li>
    </ul>
  </li>
  
  <li class="menu-item-has-children">
    <a href="#">Main 2</a>
    <ul class="dropdown-menu-main">
      <li>Sub 2</li>
    </ul>
  </li>
</ul>

逻辑说明 #

• 通过not()方法过滤出当前hover元素以外的所有子菜单，统一执行淡出操作，解决多个子菜单同时置顶显示的问题
• 加入stop(true, true)清空未完成的动画队列，避免快速切换hover时出现动画残留、抖动的异常
• 动态调整z-index层级，保证当前激活的子菜单始终在最上层显示
• 没有定义hover事件的第二个移出回调，因此鼠标单纯移出父元素时不会触发子菜单关闭，完全符合需求要求

内容的提问来源于stack exchange，提问作者Erwin van Ekeren