javascript - 当鼠标悬停仍在父级上时，如何使 .hover div 保持打开状态？

Question

首先， fiddle :http://jsfiddle.net/d7wfv8w8/

我有一个带有 Logo 、搜索表单和 Categories 链接的导航栏。当有人用鼠标移到它上面时，它应该打开 wrapper-categories div，默认情况下是 display: none;。

我成功了，只是当您将鼠标移到打开的 div 上时 div 正在关闭。我想我可以让它保持打开状态，如果我使用 .navbar .toggle 告诉它父级是 .navbar 并且只要鼠标处于打开状态它就应该保持打开状态该父 div 上的任何位置。

我怎样才能做到这一点？

这是我的 HTML:

<div class="navbar">

<div class="wrapper-header">
 <ul>
     <li class="">Logo Here</li>
     <li class="">Search Here</li>
     <li class=""><a href="#" class="toggle">Categories</a></li>
 </ul>
</div>

<div class="wrapper-categories">
    Categories Here
</div>

</div>

还有 jQuery:

$(".navbar .toggle").hover(function (event){
               event.preventDefault();
               $(".wrapper-categories").slideToggle("fast");

});

Answer 1

您可以通过将悬停功能绑定(bind)到包装 wrapper-header 和 wrapper-catagories 的元素来实现这一点。这将导致 hoverOut 仅在它离开两个元素的包装器时才被调用。保持您需要的两个 div 都打开。

fiddle :http://jsfiddle.net/d7wfv8w8/5/