当鼠标悬停在父控件上时，如何使.hover div保持打开状态？

Question

首先，摆弄一个小提琴： http : //jsfiddle.net/d7wfv8w8/

我有一个带有徽标，搜索表单和“ 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

您可以通过将悬停功能绑定到包装wrapper-header和wrapper-catagories的元素来实现此目的。 这将导致hoverOut仅在离开两个元素的包装器时才被调用。 保持两个所需的div保持打开状态。

小提琴： http : //jsfiddle.net/d7wfv8w8/5/

Answer 2

晚到聚会，但是将您的班级更改为ID，然后尝试一下。 为我工作。

$(document).ready(function(){
$( "#toggle" ).hover(
  function() {
    $( "#wrapper-categories" ).slideDown({
        left: "+=50",
        height: "toggle"
    }, 500, function() {
        // Animation complete.
    });
  }
);

var inArr = {toggle:false, wrapper-categories:false};

$('#toggle, #wrapper-categories').mouseover(function(){
    inArr [$(this).attr('id')] = true;
});

$('#toggle, #wrapper-categories').mouseout(function(){
    inArr [$(this).attr('id')] = false;
    setTimeout(function(){ 
        if(!inArr.toggle && !inArr.wrapper-categories) { 
            $('#navArea').slideUp(500);
        }
    },100);
});
});