JQuery：检测鼠标何时离开多个元素

Question

我有一个由 div 组成的菜单，其中一个 div 有一个 JQuery mouseenter 函数，可以向下滑动下拉菜单：

$(".dropdownLauncher").mouseenter(function() {
  $(".dropdown").slideDown("slow");
});

我还有一个函数可以将下拉菜单向后滑动鼠标离开下拉菜单：

$(".dropdown").mouseleave(function() {
  $(".dropdown").slideUp("slow");
});

这很好，除了当用户将鼠标移到启动器上，然后再次移出，而不经过下拉菜单，菜单保持在下方。

是否可以检查鼠标是否位于任一 div 中？

编辑 1：标记：

<div class="menu">
                <div class="menuItem selectedItem">Home</div>
                <div class="menuItem unselectedItem leftBorder dropdownLauncher">About <img src="Arrow.gif"></div>
                <div class="dropdown">
                    <div class="menuItem unselectedItem dropdownItem topBorder">Beep</div>
                    <div class="menuItem unselectedItem dropdownItem topBorder">Beep</div>
                    <div class="menuItem unselectedItem dropdownItem topBorder">Beep</div>
                </div>
                <div class="menuItem unselectedItem leftBorder">Visiting</div>
                <div class="menuItem unselectedItem leftBorder">Newsletters</div>
                <div class="menuItem unselectedItem leftBorder">Ecology</div>
            </div>

Answer 1

好吧，这种方式有很多问题......打开任何菜单（例如浏览器菜单），然后移动鼠标 - 它不是隐藏的。这是正常的方式。当您单击某处时，菜单将被隐藏（因此您可以将单击事件处理程序附加到文档）。
即使您进入子菜单，当鼠标悬停在子菜单上时，它也会显示，而当您将鼠标移动到另一个菜单项时，它会隐藏；但是当您将鼠标移出菜单时，子菜单不会隐藏。

如果您仍然想实现您的想法，您将需要实现复杂的系统来控制用户的操作。将 mouseleave 处理程序添加到 dropdownLauncher，注册用户离开此项目并触发下拉菜单隐藏。现在在隐藏下拉菜单的函数中检查鼠标是否位于下拉菜单上 - 取消隐藏；否则隐藏它。不要忘记清理该变量的状态（“left dropdownLauncher”）。例如，您可以在用户离开启动器后 1 秒内执行隐藏下拉菜单。

另请注意，当用户快速移动鼠标（只是猛烈地移动）时，浏览器没有时间触发某些事件（我在鼠标移动时遇到了问题）...请务必测试这种情况。

好吧，没有附加代码，但我希望你能明白。

更新：可能您对这个问题不再感兴趣（答案来得太晚了，所以我理解；），但我发现了非常有趣的解决方案，易于支持：

Click Examples Page

打开该页面，有菜单。据我所知，这就是您想要实现的（我的意思是菜单导航的相同行为）。在查看 JavaScript 代码后，我发现它非常小，而且与该菜单无关......所以我很清楚，他们使用纯 HTML+CSS 来执行它。只需看一下小 css 文件，并且看一下菜单 html 标记：

<div id="rootMenu" class="menustyle">
  <ul class="menubar">
      <li class="topitem">
        <a class="selected" href="_link_"><img border="0" src="/click-examples/assets/images/home.png" alt=" Home" class="link"> Home</a>
        <ul class="submenu">
           <li>
              <a title="BorderPage Java source" target="_blank" href="_link_">BorderPage Class</a>
           </li>
           <li>
              <a title="Page border HTML template" target="_blank" href="_link_">Border Template HTML</a>
            </li>
            ....
        </ul>
      </li>
      ....
   </ul>
   ....
</div>

其他一切都是由 css 完成的（特别是通过 :hover 伪类）。我喜欢这种方法。所以现在你至少有选择了；）