Question

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

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

2 个答案: