2

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

我怎样才能做到这一点：

当（'.subnav'）向下并且我没有悬停他并且也没有悬停（'#sub'）时，（'.subnav'）将向上滑动。

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

网页：

<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');
    });      
});

非常感谢（请解释最好的方法）。

4

3 回答 3

0

您实际上可以使用 CSS 来做到这一点

<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>

现在为您的 CSS

#sub:hover .subnav {display: block;}

就如此容易。

小提琴：http: //jsfiddle.net/ks22d/

否则，如果您想使用 jQuery 制作动画，只需调整以下代码：

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

小提琴：http: //jsfiddle.net/ks22d/1/

ps：受Jan Dvorak的回答启发...

于 2012-12-29T17:20:52.720 回答
0

$(':not(#sub,#subnav)').hover(function () {基本上意味着“当任何不是 #subor的事情时#subnav，做某事（此外，您要多次附加处理程序）

你想要的是

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

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

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

于 2012-12-29T17:20:59.073 回答
0

jsBin 演示 1

$('.topnav #sub').hover(function() {
    $(this).find('.subnav').stop().slideToggle('fast');
});

或者，如果您喜欢它；）

jsBin 演示 2

$('.topnav #sub').on('mouseenter mouseleave',function( e ) {
    var slideDir = e.type=='mouseenter' ? 'slideDown' : 'slideUp';
    $(this).find('.subnav').stop()[slideDir]('fast');
});
于 2012-12-29T17:23:40.143 回答