由孩子继承的jQuery隐藏

我有一个有趣的jQuery问题。基本上，我需要一个粘滞的子菜单，当我将鼠标悬停在另一个父级上以显示子菜单时隐藏，然后在我没有在子菜单上悬停在另一个父级上时再次出现。这一切正常，问题是，当我将鼠标悬停在粘滞子菜单中的子li上时，子菜单翻转出来，在显示和不显示之间闪烁。看来我的jquery是由孩子李继承的？反正这里的代码：由孩子继承的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>

来源

2012-07-10 codeprokanner

这里是问题中的一个小提琴http://jsfiddle.net/CBpHg/ – Huangism 2012-07-10 20:54:48

您需要申请安德鲁的回答，并补充一点：

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

    e.stopPropagation(); 

});

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

更新：

为了解释这一点时，您将鼠标悬停在最低级别的li上，悬停事件通过隐藏功能一路冒出来，这就是菜单消失的原因。所以我们在ul上使用stopPropagation来防止它进一步发展。你也可以在李的最底层使用它。

来源

2012-07-10 21:07:30 Huangism

是的。谢谢您的帮助！用这一个把我的头撞在墙上。 – codeprokanner 2012-07-10 21:17:43

那是因为你的选择，，第二部分适用于所有li小号载在ul.menu。您可能需要使用ul.menu > li来代替，以便只有在悬停li（直接子代ul.menu）时才会触发事件。

来源

2012-07-10 20:52:36

感谢您的贡献！ – codeprokanner 2012-07-10 21:18:04

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

这样它会显示/隐藏李的任何ul孩子。它适用于你的问题。

来源

2012-07-10 20:55:15 iurisilvio

这在大部分情况下都能正常工作，但是当子菜单li被徘徊时，然后鼠标移出ul disapears。 – codeprokanner 2012-07-10 21:09:52

由孩子继承的jQuery隐藏

回答

相关问题