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

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

如果您仍想实现自己的想法，则需要实施复杂的系统来控制用户的操作。将mouseleave handler添加到dropdownLauncher，注册该用户离开此项并触发下拉菜单隐藏。现在在隐藏下拉菜单的功能中检查鼠标是否在下拉菜单中 - 取消隐藏;否则隐藏它。不要忘记清除该变量的状态（“left dropdownLauncher”）。例如。您可以在用户离开Launcher后1秒内执行下拉菜单隐藏。

另外要小心，当用户快速移动鼠标时（只是抽搐），浏览器没时间触发某些事件（我有鼠标移动问题）...确保你测试这种情况。

好吧，没有添加任何代码，但我希望你能得到这个想法。

更新：可能你不再对这个问题感兴趣了（答案来得太晚，所以我理解;），但我找到了非常有趣的解决方案，很容易支持：

Click Examples Page

打开该页面，有菜单。当我得到它时，这就是你想要实现的（我的意思是菜单导航的相同行为）。在查看JavaScript代码之后，我注意到它非常小，甚至更多，它与该菜单无关......所以我很清楚，他们使用纯HTML + CSS来执行它。只需看看小css file，还可以查看和菜单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伪类）。我喜欢这种方法。所以现在你可以选择，至少;）

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

1 个答案: