當鼠標懸停在該菜單上時，保持jquery slideDown菜單打開？

Question

與我的JQuery滑動菜單有一些困難。當我將鼠標懸停在觸發slideDown事件的按鈕上時，它完美地工作，但是當我將鼠標懸停在滑下的子菜單上時，會觸發slideUp事件並關閉菜單。

我正在尋找一種方法來改變我的代碼，說我將鼠標懸停在初始按鈕上以觸發子菜單slideDown後，如果我將鼠標懸停在子菜單上，則該子菜單保持打開狀態，直到我不再徘徊在最初的按鈕或的子菜單上..我希望這已經夠清楚了。

這裏是我到目前爲止的JQuery，除了子菜單，它工作正常！

$(document).ready(function() { 
var menu = $('.menu') 

menu.hide(); 

$('#mainbutton').hover(

    function() { 
     $('.menu').stop(true, true).slideDown(400); 
    }, 

    function() { 
     $('.menu').stop(true, true).slideUp(400); 
    } 

); 

}); 

有什麼建議嗎？我確定這很容易，我只是不能正確地說我的問題，以找到別人的解決方案u_u

感謝您提供的任何幫助！

編輯：這裏的的jsfiddle - http://jsfiddle.net/mXXEP/

Answer 1

這不是一個特別容易解決的問題（開箱即用），因爲是互相依賴的狀態下正常工作多個元素。我以前用setTimeout完成了這個。

使用setTimeout來維護控制一個變量，該變量告訴每個懸停事件要做什麼。只是扔了的jsfiddle在一起，你想要做什麼（雖然我認爲在莫有與效果基本show部分有問題）：

http://jsfiddle.net/3vL3a/

而且JS/HTML：

$(document).ready(function() { 
    var menu = $('.menu') 
    var timeout = 0; 
    var hovering = false; 
    menu.hide(); 

    $('#mainbutton') 
     .on("mouseenter", function() { 
     hovering = true; 
     // Open the menu 
     $('.menu') 
      .stop(true, true) 
      .slideDown(400); 

     if (timeout > 0) { 
      clearTimeout(timeout); 
     } 
    }) 
     .on("mouseleave", function() { 
     resetHover(); 
    }); 

    $(".menu") 
     .on("mouseenter", function() { 
     // reset flag 
     hovering = true; 
     // reset timeout 
     startTimeout(); 
    }) 
     .on("mouseleave", function() { 
     // The timeout is needed incase you go back to the main menu 
     resetHover(); 
    }); 

    function startTimeout() { 
     // This method gives you 1 second to get your mouse to the sub-menu 
     timeout = setTimeout(function() { 
      closeMenu(); 
     }, 1000); 
    }; 

    function closeMenu() { 
     // Only close if not hovering 
     if (!hovering) { 
      $('.menu').stop(true, true).slideUp(400); 
     } 
    }; 

    function resetHover() { 
     // Allow the menu to close if the flag isn't set by another event 
     hovering = false; 
     // Set the timeout 
     startTimeout(); 
    }; 
}); 

HTML：

<div id="mainbutton">Hover over me!</div> 
<div class="menu" style="background-color:red;">Test menu text 
    <br/>Test menu text 
    <br/>Test menu text 
    <br/>Test menu text 
    <br/>Test menu text 
    <br/> 
</div> 

Answer 2

簡單的方式做，這是剛剛檢查，如果鼠標離開了.menu div，像這樣：

$(document).ready(function() { 
var menu = $('.menu') 
menu.hide(); 

$('#mainbutton').mouseover(
    function() { 
     menu.stop(true, true).slideDown(400); 
    } 
); 

$(".menu").mouseleave(  
    function() { 
     menu.stop(true, true).slideUp(400) 
    }) 
}); 

Fiddle