当鼠标悬停在该菜单上时，保持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