Question

我正在尝试模仿http://www.clydeproperty.com/中的菜单我想悬停在其中一个菜单上并进行jQuery.load()调用以获取菜单选项，然后slideDown()包含该菜单的div选项。

我想保持菜单打开，直到您移动到页面上的任何其他位置，除了打开菜单：在下面的示例中，这将是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事件但是当你进入菜单时这当然会被触发！这让我很生气，所以非常感谢任何帮助。

我想到的一种方法是添加一个几乎为负的选择器，将鼠标悬停事件添加到EXCEPT .menu和#menuOptions之类的所有内容，但我知道这远非最佳解决方案！

Answer 1

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

然后使用jQuery在.menu类中查找div，例如：

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

希望有所帮助。

Answer 2

为什么不将mouseout事件附加到#menuOptions标记，因为在您移动到页面的其他位置之前，您要保持打开状态？

要确保一次不打开多个菜单，请将trigger()事件附加到其他顶级菜单项（即产品，服务等），以便任何{{1在打开所需的标记之前，打开已打开的div标记。此触发器将触发每个#menuOptions div的mouseout事件。

鼠标悬停问题，JQuery菜单中的mouseout

2 个答案: