首页 > 代码库 > jquery两行代码实现侧边栏三级折叠菜单
jquery两行代码实现侧边栏三级折叠菜单
jquery两行代码实现侧边栏三级折叠菜单
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script src="http://www.mamicode.com/js/jquery-2.1.1.min.js"></script></head><body> <ul id="nav"> <li><a href="http://www.mamicode.com/#" id="">00000000001</a> <ul> <li><a href="http://www.mamicode.com/#">00001A</a></li> <li><a href="http://www.mamicode.com/#">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="http://www.mamicode.com/#">00003A</a></li> </ul> </li> <li><a href="http://www.mamicode.com/#" id="#">00000000002</a> <ul> <li><a href="http://www.mamicode.com/#">00001A</a></li> <li><a href="http://www.mamicode.com/#">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="http://www.mamicode.com/#">00003A</a></li> </ul> </li> <li><a href="http://www.mamicode.com/#" id="">00000000003</a></li> <li><a href="http://www.mamicode.com/#" id="">00000000004</a> <ul> <li><a href="http://www.mamicode.com/#">00001A</a></li> <li><a href="http://www.mamicode.com/#">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="http://www.mamicode.com/#">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>
实现这种树形菜单，结构很重要！
jquery两行代码实现侧边栏三级折叠菜单
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。