Question

我有一个有趣的jquery问题。基本上，当我将鼠标悬停在另一个父级上以显示子菜单时，我需要一个粘性子菜单来隐藏，然后当我没有在具有子菜单的另一个父级上空盘旋时重新出现。这一切都很好，问题是当我将鼠标悬停在我的粘性子菜单中的子li上时子菜单会翻转，在显示和不显示之间闪烁。看来我的jquery是由孩子李继承的吗？无论如何这里是代码：

CSS

.current-menu-parent ul{
  display:block;
  position:absolute;
}
#primary-nav ul li:hover ul {
  display:inline;
  position:absolute;
}
#primary-nav ul li > ul{
  display:none;
}

的JavaScript

$(document).ready(function(){
  $(".current-menu-parent ul").show()
  $("#primary-nav > ul.menu li").mouseover(function(){
    $(".current-menu-parent ul").hide();
  });
  $("#primary-nav > ul.menu li").mouseout(function(){
    $(".current-menu-parent ul").show();
  });
});

HTML

<div id="primary-nav">
  <ul class="menu">
    <li>item</li>
    <li class="current-menu-parent">This is the current menu parent item
        <ul>
            <li>Current page</li>
            <li>page</li>
            <li>page</li>
        </ul>
     </li>
   <ul>
</div>

Answer 1

这是因为选择器的第二部分ul.menu li适用于li中包含的所有ul.menu。您可能希望使用ul.menu > li进行设置，以便仅在悬停li ul.menu的直接子项的{{1}}时触发该事件。

Answer 2

$("#primary-nav > ul.menu li").hover(function() {
    $(this).children("ul").show();
}, function() {
    $(this).children("ul").hide();
});

这样它会显示/隐藏li的任何ul子女。它适用于您的问题。

Answer 3

您需要应用Andrew的答案并添加：

$(".current-menu-parent ul").mouseover(function(e){

     e.stopPropagation();

});

查看完整小提琴jsfiddle.net/CBpHg/1 /

更新

为了解释这一点，当你将鼠标悬停在最低级别的li上时，悬停事件会一直冒泡到具有隐藏功能的父级，这就是菜单消失的原因。所以我们在ul上使用stopPropagation来防止它进一步发展。您也可以在最低级别的li上使用它。

jquery hide由child继承

3 个答案: