Jquery超級菜單顯示由於延遲

多個菜單嗨我已經創建了一個電子商務平臺的jquery megamenu。我已經設置好了，所以當你把鼠標懸停在頂層時，它的所有兄弟姐妹都會消失，相關的一個會出現。問題是，如果你將鼠標懸停在'手套'上，然後'頭盔'很快出現，'手套'就會出現，好像有延遲。但是，如果你很快就從'頭盔'變成'手套'，那麼效果很好。有任何想法嗎？感謝Jquery超級菜單顯示由於延遲

這裏是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');

來源

2012-05-23 Paul Elliot

適合我。不知道問題是什麼。我沒有注意到任何延遲。 – jfrej

你使用什麼瀏覽器？ – jfrej

無論如何，你可以做很多事情來改善你的jQuery - 緩存你的對象並使用鏈接來加快速度。但我仍然不確定實際問題是什麼。 – jfrej

我認爲你有太多的懸停事件射擊 - 因此，如果您移動鼠標快速有很多事情。

當你將鼠標懸停在頂級菜單項，徘徊在兩個<a>和<li>，所以

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

和

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

都將執行。

此外，jQuery .hover()或者取：

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

或

hover(handlerInOut(eventObject) )

你的情況

那麼，你是因爲你只使用一個內部懸停（）函數中使用handlerInOut - 這樣的功能觸發時當鼠標離開時鼠標進入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(); 
    }, 
);

您可能需要調整和清理上面的代碼 - 這只是一個大致的瞭解。

來源

2012-05-23 12:27:59 jfrej

Jquery超級菜單顯示由於延遲

回答

相關問題