问题与鼠标悬停，鼠标移出在JQuery的菜单

Question

我试图仿效http://www.clydeproperty.com/我想将鼠标悬停在菜单中的一个菜单的，使一个jQuery.load()调用来获取菜单选项，然后slideDown()包含选项的股利。

然后，我想让菜单保持打开状态，直到您移动到页面上的其他任何位置，除了进入打开菜单：在下面的示例中，这将是menuOptions div。

<div class="menu"><a id="Products" href="#">Products</a></div> 
<div class="menu"><a id="Services" href="#">Services</a></div> 
<div class="menu"><a id="Contact" href="#">Contact Us</a></div> 
<div id="menuOptions"></div> 

我目前使用以下jQuery的显示菜单：

$('.menu').mouseover(function(){ 
    $('#menuOptions').load('./MenuOptions.html #' + $(this).children('a').attr('id'), function(){ 
     $('#menuOptions').stop().slideDown(1200); 
    }); 
}); 

我已经使用$('.menu').mouseout事件试过，但这个当然会火的，只要你进入菜单！这让我疯狂，所以任何帮助都非常感谢。

我想过的一种方式是添加一个几乎否定的选择器来为除了.menu和#menuOptions之外的所有内容添加一个mouseover事件，但我知道这远非最佳解决方案！

Answer 1

为什么不把mouseout事件附加到#menuOptions标记上，因为这是你希望保持打开的状态，直到你移动到页面的其他位置？

要确保您一次没有打开多个菜单，请将trigger()事件附加到其他*菜单项（即产品，服务等），以便打开任何#menuOptions div标签在你想要的一个打开之前关闭。这个触发器会触发每个#menuOptions div的mouseout事件。

Answer 2

我会把一个单独的.menuOptions div放在每个.menu div（绝对位置）。这样你可以加载每个特定的一个，并使用mouseout事件来关闭它自己。你将需要给它一个类而不是一个id，因为它们会有几个。

然后使用jQuery的。菜单类中找到DIV，如：

$('.menu').find('.menuOptions') 

希望有所帮助。