下拉菜单超时问题

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

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

当你将鼠标悬停在一个*项目下面的代码最终被执行：

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

这使得*项目失去焦点（出于某种原因），这使得“鼠标移开”代码立即开火，淡化刚刚在0.5秒内打开的菜单。

我试着在鼠标移出注释掉淡出/延迟线而这种行为停止（批，菜单永远不会消失下去，但我们已经查明的问题）

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