Question

<div id="mNavigator" style="position:absolute;top:0px;right:30px;color:#888;font-family:helvetica;font-weight:400,font-size:11px;letter-spacing:0;opacity:0.6;cursor:pointer;padding:18px;z-index:9999;background:red;">
You are browsing <span style="color:#fff">MYNAME</span>
</div>

<div id="dropDown" style="display:none;padding:8px;background:#1b1b1b;position:absolute;top:40px;right:40px;z-index:9999;">
<div style="width:319px;padding:8px 10px 8px 10px;background:#000;font-size:9px;font-family:helvetica,arial;color:#666;">MY HEADER</div>
</div>

$('#mNavigator').mouseover(function(){
    $(this).css('opacity','1');
    $('#dropDown').show('fast', function() {
     // Animation complete.
    });
}).mouseout(function(){
    $(this).css('opacity','0.6');
    $('#dropDown').hide('fast', function() {
     // Animation complete.
    });
});

我创建了一个基本的drowndown菜单，我有两个问题，希望专家可以提供帮助

1）当您尝试将鼠标移动到实际菜单项（称为MY HEADER的部分）时，如何关闭菜单？ 2）如果你将鼠标移动到红色区域，菜单会很快保持循环，导致用户体验不佳，无论如何都会出现这种情况？

为了方便起见，我在jsfiddle中加入了我的示例：http://jsfiddle.net/ECreX/1/

Answer 1

如果将子菜单作为主菜单div的子菜单，并使用.mousenter（）和.mouseleave（）而不是.mouseover（）和.mouseout（），则修复了该问题。或者，您可以使用.hover（），它是.mouseenter（）和.mouseleave（）的快捷方式。另请注意，通过嵌套子菜单div，当鼠标位于子菜单上时，主菜单保持活动状态。

<强> jsFiddle example

<强> HTML

<div id="mNavigator" style="position:absolute;top:0px;right:30px;color:#888;font-family:helvetica;font-weight:400,font-size:11px;letter-spacing:0;opacity:0.6;cursor:pointer;padding:18px;z-index:9999;background:red;">You are browsing <span style="color:#fff">MYNAME</span>
    <div id="dropDown"
    style="display:none;padding:8px;background:#1b1b1b;position:absolute;top:40px;right:40px;z-index:9999;">
        <div style="width:319px;padding:8px 10px 8px 10px;background:#000;font-size:9px;font-family:helvetica,arial;color:#666;">MY HEADER</div>
    </div>
</div>

<强>的jQuery

$('#mNavigator').mouseenter(function () {
    $(this).css('opacity', '1');
    $('#dropDown').show('fast', function () {
        // Animation complete.
    });
}).mouseleave(function () {
    $(this).css('opacity', '0.6');
    $('#dropDown').hide('fast', function () {
        // Animation complete.
    });
});

Answer 2

您可以将HTML包装在DIV元素<div id="mNav"></div>

中

的 LIVE DEMO

并使用：

$('#mNav').on('mouseenter mouseleave', function( e ) { var mEnt = e.type=='mouseenter', opacity = mEnt ? 1 : 0.6 , showHide = mEnt ? 'show' : 'hide' ; $('#mNavigator').stop().fadeTo(300, opacity); $('#dropDown').stop()[showHide](400); } );

Answer 3

在第3行添加.stop()以取消动画排队，只要菜单具有焦点，就让菜单保持打开状态：

$('#mNavigator, #dropDown').mouseover(function(){
    $(this).css('opacity','1');
    $('#dropDown').stop().show('fast', function() {
     // Animation complete.
    });
}).mouseout(function(){
    $('#mNavigator').css('opacity','0.6');
    $('#dropDown').hide('fast', function() {
     // Animation complete.
    });
});

小提琴： http://jsfiddle.net/samliew/ECreX/5/

基本的jquery下拉菜单，阻止它不断打开/关闭

3 个答案: