jQuery:不过滤

Question

假设我有一个菜单，当我将鼠标悬停在菜单上的特定元素时#sub:另一个菜单正在向下滑动.subnav。

我怎样才能做到这一点:

当('.subnav')向下并且我没有将其悬停并且也没有悬停('#sub')时，('.subnav')将向上滑动。

我尝试使用 not filter 来做到这一点。

Html:

<ul class="topnav">
        <li><a href="#">Home</a></li>
        <li id="sub"><a href="#">slide</a>   
            <ul class="subnav">
                <li><a href="#">sub</a></li>
                <li><a href="#">sub</a></li>
                <li><a href="#">sub</a></li>
            </ul>
       </li>
</ul>

JS:

 $('.topnav #sub').hover(function() {
    $(this).children('.subnav').slideDown('fast');

    $(':not(#sub,#subnav)').hover(function () {
        $('#sub .subnav').slideUp('fast');
    });      
}); 

非常感谢(请解释最好的方法)。

Answer 1

$(':not(#sub,#subnav)').hover(function () { 基本上意味着“当任何不是 # sub 或 #subnav，执行某些操作(此外，您会多次附加处理程序)

你想要的是

$("#sub").hover(
  function(){
    $(this).children('.subnav').slideDown('fast');
  },function(){
    $(this).children('.subnav').slideUp('fast');
  }
}

jQuery#hover 接受一个或两个函数作为参数。如果提供两个函数，则第一个函数在鼠标进入时调用，第二个函数在鼠标离开时调用。如果提供了一个函数，则在两种情况下都会调用该函数。
文档:http://api.jquery.com/hover/

请注意，如果 .subnav 悬停，则 #sub 也悬停，因此您无需同时检查两者。