在列表項之間移動時jQuery菜單被破壞

我創建了一個帶下拉菜單的自定義jQuery水平菜單。最初，當它懸停在列表項上時，它剛剛淡入一個子菜單，並在離開時淡出。在列表項之間移動時jQuery菜單被破壞

但是我想創建一個效果，如果你將鼠標移出子菜單，它不會立即消失（例如，如果你超過了它的像素）。我在上一個問題中意識到了hoverIntent插件，但打開兄弟子菜單時會有一個惱人的延遲。所以我從頭開始考慮自己的功能。

我的HTML是一個標準的嵌套列表，ul＃menu> li> ul> li。我的javascript如下：

var menuVisible = false; 
var cancelTimeout = false; 

$(document).ready(function(){ 
    $('ul#menu > li').hover(
    function(){ 
     menuMouseOver($(this)); 
    }, 
    function(){ 
     menuMouseOut($(this)); 
    } 
); 
}); 

function menuMouseOver($li) 
{ 
    // if one of the menus is down, check which one we're hovering 
    if (menuVisible) { 
    cancelTimeout = true; 
    if ($li.find('>ul').css('display') == 'block') { 
     // do nothing if we're hovering over current menu 
    } 
    else { 
     // turn off all menus 
     $li.parent().find('>li').each(function() { 
     menuOff($li) 
     }); 
    } 
    } 

    menuOn($li); 
    menuVisible = true; 
} 

function menuMouseOut($li) 
{ 
    setTimeout( 
    function(){ 
     if (!cancelTimeout) { 
     menuOff($li); 
     menuVisible = false; 
     } 
     cancelTimeout = false; 
    }, 
    2000 
); 

} 

function menuOn($li) 
{ 
    $li.css('background-position', 'left bottom'); 
    $li.find('>ul').fadeIn('fast'); 
} 
function menuOff($li) 
{ 
    $li.css('background-position', 'left top'); 
    $li.find('>ul').fadeOut('fast'); 
}

以下幾點工作：

移動在頂級li打開子菜單。
遠離子菜單2秒後關閉（用於測試目的;在最終版本中將減少）。
移動從子菜單，距離回取消超時，因此從消失

但是停止菜單，這些不工作：

當從一個最高級別列表移動項目到下一個，上一個子菜單不會消失。我希望它馬上消失，沒有正常的延遲。
如果我移動了兩個頂級列表項目，menuVisible設置爲false，這會導致系統崩潰。這是因爲cancelTimeout在您移到第一個兄弟節點時設置爲true，並且在您移動到第二個兄弟節點時它仍然爲真。

我很感激任何洞察，爲什麼會發生這種情況，當然，如何解決它。

來源

2009-09-22 DisgruntledGoat

您是否嘗試過Superfish菜單jQuery插件？

我已經在我的項目中使用過它，我認爲它會爲您解決這些問題。

來源

2009-09-22 16:45:16

這個插件也不錯：http://css-tricks.com/simple-jquery-dropdowns/ – Mottie 2009-09-22 19:32:30

@fudgey：那根本不會做我想要的。當您移開鼠標時，菜單消失。我已經在5分鐘內做到了這一點（我的意思是說jQuery已經很簡單了）。 – DisgruntledGoat 2009-09-22 23:46:50

謝謝Daniel，Superfish插件工作得很好。我通常是一個擁有多餘功能的插件，但是即使有陰影和其他毫無意義的廢話，Superfish也是非常小的。 – DisgruntledGoat 2009-09-22 23:50:26

在列表項之間移動時jQuery菜單被破壞

回答

相關問題