Question

我不太清楚为什么我的菜单输出不正确。只要将鼠标悬停在菜单标题上以查看下拉列表，它就会闪烁其子菜单，以便您无法从中选择链接。有什么想法吗？我现在已经做了很长时间了。

var menuTimeout = '';
$('.nav_click').bind({
mouseover: function(){
    if($(this).hasClass('submenus') == true){
        var whichMenu = $(this).attr('id');
        var displayMenu = '';//yes its blank for a reason
        if(whichMenu == 'navi2'){displayMenu = 'menu1';}
        if(whichMenu == 'navi3'){displayMenu = 'menu2';}
        if(whichMenu == 'navi4'){displayMenu = 'menu3';}
        if(whichMenu == 'navi5'){displayMenu = 'menu4';}
        if(displayMenu != '')
        {
            var leftOffset = ($(this).position().left-5);
            var topOffset = ($(this).offset().top+$(this).height()-10);
            $('#'+displayMenu).css({"display":"block", "position":"absolute", "left":leftOffset+"px", "top":topOffset+"px"});
        }
    }
    var menuitem = $(this).attr('id');
    if(menuitem == "navi1"){$(this).css({"background-position":"0 -63px"});}
    if(menuitem == "navi2"){$(this).css({"background-position":"-100px -63px"});}
    if(menuitem == "navi3"){$(this).css({"background-position":"-230px -63px"});}
    if(menuitem == "navi4"){$(this).css({"background-position":"-420px -63px"});}
    if(menuitem == "navi5"){$(this).css({"background-position":"-524px -63px"});}
    if(menuitem == "navi6"){$(this).css({"background-position":"-638px -63px"});}
    if(menuitem == "navi7"){$(this).css({"background-position":"-737px -63px"});}
},
mouseout: function(){
   if($('.submenublock').is(":visible") == true){menuTimeout = setInterval(function() {$('.submenublock').fadeOut('slow').css({"display":"none"}); clearInterval(menuTimeout);}, 1500);}
    var menuitem = $(this).attr('id');
    if(menuitem == "navi1"){$(this).css({"background-position":"0 0"});}
    if(menuitem == "navi2"){$(this).css({"background-position":"-100px 0"});}
    if(menuitem == "navi3"){$(this).css({"background-position":"-230px 0"});}
    if(menuitem == "navi4"){$(this).css({"background-position":"-420px 0"});}
    if(menuitem == "navi5"){$(this).css({"background-position":"-524px 0"});}
    if(menuitem == "navi6"){$(this).css({"background-position":"-638px 0"});}
    if(menuitem == "navi7"){$(this).css({"background-position":"-737px 0"});}
},
click: function(){
    window.location = $(this).attr('rel');
}

});
$('.submenublock ul').bind({
mouseover: function(){
clearInterval(menuTimeout);
},
mouseout: function(){
menuTimeout = setInterval(function()                                                             {$('.submenublock').fadeOut('slow').css({"display":"none"}); clearInterval(menuTimeout);}, 500);   
}
 });

Answer 1

可能是因为鼠标悬停处理程序正在触发mouseout处理程序。

当您将鼠标悬停在顶级项目上时，最终会执行以下代码：

 $('#'+displayMenu).css({"display":"block", "position":"absolute", "left":leftOffset+"px", "top":topOffset+"px"}

这会导致顶级项目失去焦点（由于某种原因），这会使“mouseout”代码立即触发，淡出刚刚在0.5秒内打开的菜单。

我尝试在mouseout中注释掉淡出/延迟线并且此行为停止（授予，菜单也永远不会消失，但我们已经确定了问题）

mouseout: function(){
  // if($('.submenublock').is(":visible") == true){menuTimeout = setInterval(function() {$('.submenublock').fadeOut('slow').css({"display":"none"}); clearInterval(menuTimeout);}, 1500);}

下拉菜单超时问题

1 个答案: