Блог

Я не совсем уверен, почему время ожидания моих меню истекает неправильно. Как только вы наводите указатель мыши на заголовок меню, чтобы увидеть выпадающий список, он отображает свое подменю, так что вы не можете выбрать ссылку из него. Есть идеи, почему? Я работал над этим слишком долго.

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

Вероятно, потому, что обработчик наведения курсора мыши запускает обработчик вывода курсора мыши.

При наведении курсора мыши на элемент верхнего уровня в конечном итоге выполняется следующий код:

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