讓第二層保持閉合

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; 
}