JQuery мега-меню, показывающее несколько меню из-за задержки

Question

Привет Я создал jquery megamenu для платформы электронной коммерции. Я настроил его так, что, когда вы наводите верх над ли на верхнем уровне, все его братья и сестры исчезают, и появляется соответствующая. Проблема в том, что если вы наведете «перчатки», а затем «шлемы» очень быстро, «перчатки» появятся, как будто есть задержка. Тем не менее, если вы очень быстро переходите от «шлемов» к «перчаткам», это прекрасно работает. есть идеи? благодаря

здесь код JQuery и ссылка на сайт http://www.firecrestmoto.co.uk/index.php

 // Add controller class to <li> on top level 
     $('#menu.accordion ul li ul li').parent().parent().parent().addClass('parentitem'); 


     // Hide and show entire category and sub categories at the same time 
     $('#menu.accordion a').addClass('menu_closed'); 
     $('#menu.accordion a').hover(

    function(){ 
    $(this).addClass('menu_open'); 
    $(this).siblings('ul').fadeIn(); 
    $('#menu.accordion ul li ul').show(); 
    } 
    ); 

     $('ul.parentitem').mouseleave(function(){ 
$(this).hide(); 
     }); 


     // Hover on <li> in the top level menu 
    $('#menu.accordion li').hover(function(){ 
$(this).siblings('li').children('ul.parentitem').hide(); 
$(this).children('ul.parentitem').css('z-index','10000'); 
}); 


     // Leave the main menu div, all submenus disappear 
     $('#menu').mouseleave(function(){ 
$(this).children('li').children('ul').hide(); 
     }); 


    // Add controller classes to <li> on each sub level 
     $('#menu.accordion').children('li').addClass('topline'); 
     $('#menu.accordion ul.parentitem').children('li').addClass('finallines'); 

Answer 1

Я думаю, что вы слишком много событий при наведении курсора мыши стрельбы - так что если вы двигаете мышь быстро там происходит много.

При наведении курсора на пункт меню верхнего уровня, вы нависли над как <a> и <li>, так

$('#menu.accordion a').hover(

и

$('#menu.accordion li').hover(

оба выполнить.

Кроме того, jQuery .hover() принимает либо:

hover(handlerIn(eventObject) , handlerOut(eventObject) ) 

или

hover(handlerInOut(eventObject) ) 

Так что в вашем случае, если вы используете handlerInOut, потому что вы используете только одну функцию внутри парении() - так что функция срабатывает при мышь вводит И, когда мышь уходит. Это означает, что при перемещении и выводе элемента навигации верхнего уровня происходит четыре события.

Также обратите внимание, что $('#menu.accordion li') будет соответствовать не только элементам верхнего уровня, но и каждому li в подменю, и вы присоединяете событие зависания к каждому из них. Это слишком много событий.

Так вместо того, чтобы как парит, попробовать что-то вроде этого:

$('#menu.accordion').children('li').hover(function(){ 
     // Add here your code for mouse enter 
     $(this).siblings('li').children('ul.parentitem').hide(); 
     $(this).children('ul.parentitem').css('z-index','10000'); 
     $(this).find('a').addClass('menu_open'); 
     $(this).find('ul').fadeIn(); 
     // I'm not sure what the following is supposed to do... 
     // ...you are showing ul in all sub-menus. 
     $('#menu.accordion ul li ul').show(); 
    }, function(){ 
     // Add here your code for mouse leave 
     $(this).find('a').removeClass('menu_open'); 
     $(this).children('ul.parentitem').css('z-index','0').hide(); 
    }, 
); 

Вам может понадобиться настроить и очистить код выше - это только общая идея.