지연으로 인해 여러 메뉴를 표시하는 Jquery 메가 메뉴

Question

안녕하세요 전자 상거래 플랫폼 용 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

난 당신이 발사 너무 많은 호버 이벤트가 생각하는 jQuery 코드와 링크입니다.

당신이 최상위 메뉴 항목 위에 마우스를 올려

, 당신은 둘 다 실행됩니다 그래서, <a> 및 <li> 모두에 걸쳐

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

및

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

을 유혹하고 있습니다.

또한, jQuery .hover() 걸립니다 중 하나

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

또는 하나만 가져가 내부() 함수 사용하기 때문에 당신이 handlerInOut를 사용하는 귀하의 경우 그래서

hover(handlerInOut(eventObject) ) 

- 그래서 함수 화재 마우스가 들어가면 AND가 입력됩니다. 즉, 최상위 수준 탐색 항목을오고가는 중에 네 가지 이벤트가 발생합니다.

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

당신은 조정하고 위의 코드를 청소해야합니다 -이 그냥 일반적인 생각이다.