三级目录导航 代码在线演示
学习资源推荐：https://blog.csdn.net/qq_42813491/article/details/90213353 代码 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>三级目录导航</title> <style type="text/css"> * { margin: 0; padding: 0; } html, body { width: 100%; height: 100%; font-size: 14px; } aside { background-color: #34495e; height: 100%; float: left; width: 200px; } aside ul { text-align: center; list-style: none; position: relative; top: 30%; } aside ul li { width: 100px; padding-left: 25%; margin: 4px; } aside ul li p { width: 100px; color: #000; font-weight: bold; cursor: pointer; } aside ul li p:hover { color: gold; } aside ul li a { display: block; width: 100px; text-decoration: none; color: #ccc; } aside ul li a:hover { color: #2ecc71; } aside div.all { position: relative; top: 24%; left: 20%; font-weight: bold; } aside div.all span { cursor: pointer; } aside div.all span:hover { color: white; } </style></head><body> <aside> <div class="all"> <span id="openAll">展开全部</span> || <span id="closeAll">关闭全部</span> </div> <ul> <li> <p>部门管理</p> <ul class="isShow"> <li><a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href="#">添加部门</a></li> <li> <p>查询部门</p> <ul class="isShow"> <li><a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href="#">A组</a></li> <li><a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href="#">B组</a></li> <li><a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href="#">C组</a></li> <li><a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href="#">D组</a></li> </ul> </li> </ul> </li> <li> <p>日志记录</p> <ul class="isShow"> <li><a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href="#">月报</a></li> <li><a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href="#">周报</a></li> <li><a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href="#">日报</a></li> </ul> </li> </ul> </aside> <script type="text/javascript"> //ul的展开与关闭的业务函数 function isOpen(p, ul) { var open = true; p.onclick = function() { if (open) { ul.style.display = "none"; open = false; } else { ul.style.display = "block"; open = true; } } } //获取全部p标签 var pArr = document.querySelectorAll("p"); //获取全部带有isShow类名的ul var ulArr = document.querySelectorAll("ul.isShow"); //获取id为openAll的span var openAll = document.querySelector("#openAll"); //获取id为closeAll的span var closeAll = document.querySelector("#closeAll"); // 遍历，循环注册事件 for (var i = 0; i < ulArr.length; i++) { isOpen(pArr[i], ulArr[i]); } //打开所有 openAll.onclick = function() { // 遍历，循环注册事件 for (var i = 0; i < ulArr.length; i++) { ulArr[i].style.display = "block"; } } //关闭所有 closeAll.onclick = function() { // 遍历，循环注册事件 for (var i = 0; i < ulArr.length; i++) { ulArr[i].style.display = "none"; } } </script></body></html> 在线演示 https://pxpobz.coding.io/http://lengyuexin.coding.me/categories/