jquery两行代码实现侧边栏三级折叠菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="js/jquery-2.1.1.min.js"></script>
</head>
<body>
<ul id="nav">
<li><a href="#" id="">00000000001</a>
<ul>
<li><a href="#">00001A</a></li>
<li><a href="#">00002A</a>
<ul>
<li><a href="">0001</a></li>
<li><a href="">0002</a></li>
<li><a href="">0003</a></li>
<li><a href="">0004</a></li>
</ul>
</li>
<li><a href="#">00003A</a></li>
</ul>
</li>
<li><a href="#" id="#">00000000002</a>
<ul>
<li><a href="#">00001A</a></li>
<li><a href="#">00002A</a>
<ul>
<li><a href="">0001</a></li>
<li><a href="">0002</a></li>
<li><a href="">0003</a></li>
<li><a href="">0004</a></li>
</ul>
</li>
<li><a href="#">00003A</a></li>
</ul>
</li>
<li><a href="#" id="">00000000003</a></li>
<li><a href="#" id="">00000000004</a>
<ul>
<li><a href="#">00001A</a></li>
<li><a href="#">00002A</a>
<ul>
<li><a href="">0001</a></li>
<li><a href="">0002</a></li>
<li><a href="">0003</a></li>
<li><a href="">0004</a></li>
</ul>
</li>
<li><a href="#">00003A</a></li>
</ul>
</li>
</ul>
<style>
#nav li ul{display: none}
</style>
</body>
</html>
<script>
$(‘#nav li >a‘).click(function(){
//1.单机a标签，a标签的下一个节点展开，再单机一次a标签，a标签的下一个节点收起
//2.单机其他a标签，展开a标签的下一个节点，关闭a标签父级所有的ul
$(this).next().slideToggle();
$(this).next().show().parent().siblings().find(‘ul‘).hide();
});
</script>
实现这种树形菜单，结构很重要！
时间： 2024-10-10 23:05:50