- 学习资源推荐: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 href="#">添加部门</a></li>
<li>
<p>查询部门</p>
<ul class="isShow">
<li><a href="#">A组</a></li>
<li><a href="#">B组</a></li>
<li><a href="#">C组</a></li>
<li><a href="#">D组</a></li>
</ul>
</li>
</ul>
</li>
<li>
<p>日志记录</p>
<ul class="isShow">
<li><a href="#">月报</a></li>
<li><a href="#">周报</a></li>
<li><a href="#">日报</a></li>
</ul>
</li>
</ul>
</aside>
<script type="text/javascript">
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;
}
}
}
var pArr = document.querySelectorAll("p");
var ulArr = document.querySelectorAll("ul.isShow");
var openAll = document.querySelector("#openAll");
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/