JQuery下拉菜单问题：hover触发全部子菜单展开而非单个

我来帮你搞定这个问题！你的核心问题出在事件绑定的目标和this指向上——现在你把hover事件绑在了整个<nav>元素上，只要鼠标碰到导航区的任何地方，所有.hand子菜单都会一起展开。我们需要把事件精准绑定到每个父菜单项上，这样就能只展开当前悬停的那个子菜单了。

修改后的完整代码 #

<nav>
  <ul class="huvud" id="top">
    <li>
      <a href="#">Godis</a>
      <ul class="hand">
        <li><a href="#">Choklad</a></li>
        <li><a href="HTML/lakrits.html">Lakrits</a></li>
      </ul>
    </li>
    <li>
      <a href="#">Bakelser</a>
      <ul class="hand">
        <li><a href="#">Croissant</a></li>
        <li><a href="#">idk</a></li>
      </ul>
    </li>
    <li>
      <a href="#">Drycker</a>
      <ul class="hand">
        <li><a href="#">Läsk</a></li>
        <li><a href="#">Energidryck</a></li>
      </ul>
    </li>
  </ul>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  // 绑定到顶级菜单的每个父li上，而非整个nav
  $('.huvud > li').hover(
    function() {
      // 仅操作当前悬停li下的.hand子菜单
      $('.hand', this).slideDown(700);
    },
    function() {
      $('.hand', this).slideUp(700);
    }
  );
});
</script>

关键修改点说明 #

• 调整事件绑定目标：把hover事件从$('nav')改成$('.huvud > li')，这样我们只监听顶级导航里的每个父菜单项，而不是整个导航区域。
• 修复this指向问题：把原来的箭头函数换成普通函数——箭头函数不会绑定自己的this，它的this会继承外层作用域，导致你之前的代码里$('.hand', this)其实是在全局范围内查找子菜单，这也是所有子菜单同时展开的隐形原因。换成普通函数后，this会正确指向当前悬停的那个<li>元素。
• 精准定位子菜单：通过$('.hand', this)只查找当前<li>下的.hand子元素，确保只有当前父菜单对应的子菜单会触发展开/收起动画。

可选优化：避免动画排队 #

如果用户快速在菜单间切换，可能会出现动画卡顿的情况，你可以给slideDown/slideUp加上.stop(true, true)来终止之前的动画：

function() {
  $('.hand', this).stop(true, true).slideDown(700);
},
function() {
  $('.hand', this).stop(true, true).slideUp(700);
}

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