让第二层保持闭合

Question

在我的页面上我有一个导航栏。在我的导航栏中，我有3个关卡。第一层是主菜单，然后你得到第二层，然后是第三层。我的问题是，当我将鼠标悬停在显示第二级和第三级的菜单项上时，我只希望第二级显示，除非我将鼠标悬停在具有第三级的第二级上。

这里是我的菜单

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> 
<nav class="navbar navbar-default main_menu"> 
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> 
<div class="navbar-header"> 
<div id="mainMenu" class="collapse navbar-collapse"> 
<ul class="nav navbar-nav"> 
<li class="parent"> 
Home 
<ul class="father"> </ul> 
</li> 
<li class="parent"> 
About Layer 1 
<ul class="father"> 
<li class="parent_child"> 
About Layer 2 
<ul class="son" style="display: none;"> 
<li class="child"> About Layer 3 part 2 </li> 
<li class="child"> About Layer 3 Part 3 </li> 
<li class="child"> About Layer 3 Part 4 </li> 
</ul> 
</li> 
<li class="parent_child"> 
About Layer 2 part 2 
<ul class="son"> 
<li class="child"> About Layer 3 </li> 
</ul> 
</li> 
</ul> 
</li> 
<li class="parent"> 
Test 
<ul class="father"> 
<li class="parent_child"> 
test 2 
<ul class="son" style="display: none;"> 
<li class="child"> test 3 </li> 
</ul> 
</li> 
</ul> 
</li> 
</ul> 
</div> 
</div> 
</nav> 
</div> 

我的JS

$(document).ready(function() { 

$(".nav a").click(function(){ 
    //event.preventDefault(); 
    $(".nav a").removeClass("active-menu"); 
    $(this).addClass("active-menu"); 
}); 

$('ul.navbar-nav li').hover(
    function() { 
     $(this).find('.father:first').css('display','block'); 
    }, 
    function() { 
     $(this).find('.father:first').css('display','none'); 
    } 
); 

$('ul.navbar-nav li').hover(
    function() { 
     $(this).find('.son:first').css('display','block'); 
    }, 
    function() { 
     $(this).find('.son:first').css('display','none'); 
    } 
); 
}); 

我的CSS

.father{ 
display: none; 
} 

.son{ 
display: none; 
} 

的的jsfiddle：JSFIDDLE

Answer 1

您可以简化您的jQuery的FOLL因为：

的.children() method将仅选择直接ul孩子：

Updated Example

$('ul.navbar-nav li').hover(
    function() { 
     $(this).children('ul').show(); 
    }, 
    function() { 
     $(this).children('ul').hide(); 
    } 
); 

或者，您也可以使用direct child selector, >：

$('ul.navbar-nav li').hover(
    function() { 
     $(this).find('> ul').show(); 
    }, 
    function() { 
     $(this).find('> ul').hide(); 
    } 
); 

---

值得点荷兰国际集团的是可以完全避免的jQuery，并用纯CSS：

Updated Example

ul.navbar-nav li ul { 
    display: none; 
} 
ul.navbar-nav li:hover > ul { 
    display: block; 
}