0

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

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>
4

3 回答 3

1

这是因为您的选择器的第二部分ul.menu li, 适用于 ALLli中包含的ul.menu. 您可能希望使用 aul.menu > li来代替它，以便事件仅在悬停时触发，li它是ul.menu.

于 2012-07-10T20:52:36.960 回答
0 
$("#primary-nav > ul.menu li").hover(function() {
    $(this).children("ul").show();
}, function() {
    $(this).children("ul").hide();
});

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

于 2012-07-10T20:55:15.277 回答
0

您需要应用安德鲁的答案并添加以下内容：

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

     e.stopPropagation();

});

请参阅完整的小提琴 jsfiddle.net/CBpHg/1/

更新：

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

于 2012-07-10T21:07:30.310 回答