javascript - 让第二层保持关闭

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 简化为以下内容:

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