Question

一旦进入我的菜单项，我隐藏的div会很好地滚下来然后如果你离开就会后退。问题是如果你已经在容器周围进行鼠标混合然后重新进入菜单项顶部，不幸的是重新启动并再次向下滑动隐藏容器：

http://jsfiddle.net/NAyWQ/17/

所以我正在尝试做的是测试项目是否已经可见，如果只是继续显示容器。

关闭，因为我可以达到这个目的：

http://jsfiddle.net/NAyWQ/18/

非常感谢任何帮助。

Answer 1

这有效：

http://jsfiddle.net/DLFm3/

HTML：

<div id="container">
    <div id="header">
        <div id="boundary"></div>
        <div id="menu">
            <div id="about">
                 <div id="dd_about"></div>
            </div> 
        </div>
    </div>
</div>

javascript

var menustate = "hidden";

$('#about').bind('mouseenter', function() {       

    if (menustate == "hidden")
    {
        $('#dd_about').slideDown('fast');
        menustate = "shown";
    }
});


$('#about').bind('mouseleave', function () {
      $('#dd_about').slideUp('fast');
    menustate = "hidden";
});

CSS

#container {
    width:500px;
    margin:0 auto;
    position:relative;    
}

#header {
    width:100%;
    height:50px;
    background:blue;
    position:relative;
}

#boundary {
    width:320px;
    height:60px;
    bottom:0;
    right:0;
    position:absolute;
    background:purple;

}

#menu {
     width:100px;
     height:40px;
     position:absolute;
     right:10px;
     top:10px;   
}

#about {
    width:100px;
    height:40px;
    float:left;
    background:yellow;

 }

#dd_about  {
   top : 40px;
   left : 0px;
   width:100px;
   height:200px;
   position:absolute; 
   background:red;
   display:none;
} 

#dd_about {right:10px}

就像这样：

http://jsfiddle.net/DLFm3/1/

使用此javascript

$('#about').bind('mouseenter', function() {       

        $('#dd_about').slideDown('fast');
});


$('#about').bind('mouseleave', function () {
      $('#dd_about').slideUp('fast');
});

Answer 2

要解决设置方式，请在此处查看jsfiddle。如果您想要主菜单中包含的dropdwon菜单，Hogan也给了您一个很好的答案。否则，我只是在stop(true, true)上添加了#dd_about调用，以停止播放动画。

Answer 3

以下是工作演示http://jsfiddle.net/NAyWQ/21/

此示例使用标志变量来检查当前悬停状态

var hover = false;

$('#about').bind('mouseenter', function() {      
    hover = true;
    $('#dd_about').slideDown('fast');
});

$('#boundary').bind('mouseenter', function () {
    hover = false;
    $('#dd_about').slideUp('fast');
});

$('#dd_about').bind('mouseleave', function () {
    hover = false;
    setTimeout(function() {
        if (hover) return false; 
        $('#dd_about').slideUp('fast');
    }, 50);
});

阻止菜单项在内部重新触发

3 个答案: