如何用jQuery实现悬停下拉导航？解决菜单收起及链接高亮问题

问题核心 #

当前代码存在两个问题：

• 鼠标从Link 3移至下拉菜单时，会触发Link 3的mouseleave事件导致菜单意外收起
• 使用trigger('hover')无法触发CSS伪类样式，无法保持Link 3的hover状态

修正后的完整代码 #

HTML

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>

<div id="header">
 <ul>
  <li><a href="javascript:void(0);" id="link-one">Link 1</a></li>
  <li><a href="javascript:void(0);" id="link-two">Link 2</a></li>
  <li class="dropdown-trigger">
    <a href="javascript:void(0);" id="link-three">Link 3</a>
  </li>
 </ul>
</div>

<div id="header-dropdown-content">
 <a href="javascript:void(0);">Dropdown 1</a>
 <a href="javascript:void(0);">Dropdown 2</a>
 <a href="javascript:void(0);">Dropdown 3</a>
 <a href="javascript:void(0);">Dropdown 4</a>
</div>

</body>
</html>

CSS

div#header {
 z-index: 1;
 position: sticky;
 top: 0;
}
div#header ul {
 list-style-type: none;
 user-select: none;
 font-size: 1.15em;
 margin: -8px;
 padding: 0;
 height: 43px;
 overflow: hidden;
 backdrop-filter: blur(3px);
 background: none;
 background-color: rgba(23 23 23 / 75%);
 box-shadow: 0 5px 10px 0 rgba(0 0 0 / 60%);
}
div#header ul li {
 float: left;
}
div#header ul li a {
 display: block;
 cursor: pointer;
 color: white;
 text-align: center;
 padding: 6px 16px;
 border: 4px solid transparent;
 text-decoration: none;
 transition: .5s border-bottom, .3s background;
}
/* 同时作用于hover伪类和active类，模拟持久hover状态 */
div#header ul li a:hover,
div#header ul li a.active {
 background: #222;
 border-bottom: 4px solid #f00;
}

div#header-dropdown-content {
 display: none;
 position: absolute;
 left: 114.5px;
 top: 43px;
 font-size: 17px;
 box-shadow: 0px 4px 9px #aaa;
 background: #f1f1f1;
 width: 157.5px;
}
div#header-dropdown-content a {
 color: black;
 text-decoration: none;
 display: flex;
 padding: 15px 10px;
}
div#header-dropdown-content a:hover {background: #ddd;}

JavaScript

$(document).ready(function(){
  let dropdownTimer;
  const $linkThree = $("#link-three");
  const $dropdown = $("#header-dropdown-content");
  const $triggerArea = $(".dropdown-trigger").add($dropdown);

  // 鼠标进入触发区域（父li或下拉菜单）时，展开菜单并添加active类
  $triggerArea.on('mouseenter', function(){
    clearTimeout(dropdownTimer);
    $dropdown.slideDown(500);
    $linkThree.addClass("active");
  });

  // 鼠标离开触发区域时，延迟收起菜单并移除active类
  $triggerArea.on('mouseleave', function(){
    dropdownTimer = setTimeout(function(){
      $dropdown.slideUp(500);
      $linkThree.removeClass("active");
    }, 200); // 200ms延迟避免快速切换时的闪烁
  });
});

关键改进说明 #

• 统一触发范围：将事件绑定到包含Link 3的父li和下拉菜单，确保鼠标在两者范围内时菜单保持展开
• 延迟隐藏机制：用定时器延迟菜单收起，解决鼠标在触发元素和下拉菜单间切换时的意外关闭问题
• 模拟hover状态：通过添加/移除.active类替代无效的trigger('hover')，实现悬停下拉时Link 3保持hover样式

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