折叠父节点，直到鼠标移出其子节点

我想制作一个响应式导航内容，
当我鼠标悬停在"一级"标题上时，它会展开其子标题，
当鼠标悬停在子标题上时会将其全部折叠。

<html>
<head>
<style></style>
</head>
<body>
<ul>
<li class="level-1"> <a href="">HTML</a>
<ul> <li> <a href="">1.Abstract Sections</a>
<ul>
<li> <a href="">1.Header</a> </li>
<li> <a href="">2.Footer</a> </li>
<li> <a href="">3.A.Main</a> </li>
<li> <a href="">4.B1.Nav</a> </li>
<li> <a href="">5.B2.Aside</a> </li>
</ul>
</li>
<li> <a href="">2.Block</a>
<ul> <li> <a href="">Headers</a> </li>
<li> <a href="">Paragraphs</a> </li>
<li> <a href="">List</a> </li>
<li> <a href="">Table</a> </li>
<li> <a href="">Quotation</a> </li>
</ul>
</li>
</ul>
</li><!-- html -->
<li class="level-1"> <a href="">CSS</a>
<ul> <li><a href="">Boxes</a>
<ul>
<li> <a href="">Margin</a> </li>
<li> <a href="">Padding</a> </li>
<li> <a href="">Border</a> </li>
</ul>
</li>
<li><a href="">Layout</a></li>
<li><a href="">Text</a></li>
</ul>
</li>
</ul>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js"></script>
<script>
$(document).ready(function(e){
$("body>ul>li>ul").hide();
$("body>ul>li>a").on("mouseover",function(e){
e.preventDefault();
// alert("clicked");
$(e.target).next().show();
});
$("body>ul>li").on("mouseout",function(e){
e.preventDefault();
// alert("clicked");
$(e.target).next().hide();
});
})
</script>
</body>
</html>

代码部分起作用，但当我鼠标移出一级标题时，它被折叠了。我希望它一直展开，直到我离开它的副标题。

您不需要任何JS，因为通过使用CSS:hover选择器来隐藏/显示基于用户悬停的元素的相关li元素，可以更简单有效地完成此操作：

ul > li > ul { 
display: none; 
}
ul > li:hover > ul {
display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<ul>
<li class="level-1">
<a href="">HTML</a>
<ul>
<li>
<a href="">1.Abstract Sections</a>
<ul>
<li> <a href="">1.Header</a> </li>
<li> <a href="">2.Footer</a> </li>
<li> <a href="">3.A.Main</a> </li>
<li> <a href="">4.B1.Nav</a> </li>
<li> <a href="">5.B2.Aside</a> </li>
</ul>
</li>
<li>
<a href="">2.Block</a>
<ul>
<li> <a href="">Headers</a> </li>
<li> <a href="">Paragraphs</a> </li>
<li> <a href="">List</a> </li>
<li> <a href="">Table</a> </li>
<li> <a href="">Quotation</a> </li>
</ul>
</li>
</ul>
</li>
<li class="level-1">
<a href="">CSS</a>
<ul>
<li>
<a href="">Boxes</a>
<ul>
<li> <a href="">Margin</a> </li>
<li> <a href="">Padding</a> </li>
<li> <a href="">Border</a> </li>
</ul>
</li>
<li><a href="">Layout</a></li>
<li><a href="">Text</a></li>
</ul>
</li>
</ul>

相关内容

最新更新

热门标签：