<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
font-family: "Microsoft YaHei", serif;
}
body, dl, dd, p, h1, h2, h3, h4, h5, h6 {
margin: 0;
}
ol, ul, li {
margin: 0;
padding: 0;
list-style: none;
}
img {
border: none
}
#wrap{
width: 200px;
margin: 50px auto;
border: 1px solid #999;
user-select: none;
}
#wrap .title{
width: 100%;
height: 30px;
font-size: 16px;
line-height: 30px;
text-indent: 5px;
background: pink;
color: #fff;
cursor: pointer;
border-bottom: 1px dashed #eee;
}
#wrap .list{
display: none;
}
#wrap .list.show{
display: block;
}
#wrap .list li{
width: 100%;
height: 20px;
line-height: 20px;
font-size: 12px;
border-bottom: 1px dashed #eee;
text-indent: 20px;
cursor: pointer;
}
#wrap .list li:hover{
background-color: #eee;
}
</style>
</head>
<body>
<div id="wrap">
<div class="friend">
<p class="title">同事</p>
<ul class="list">
<li>qq</li>
<li>ww</li>
<li>ee</li>
<li>rr</li>
</ul>
</div>
<div class="friend">
<p class="title">好友</p>
<ul class="list">
<li>tt</li>
<li>yy</li>
<li>uu</li>
</ul>
</div>
<div class="friend">
<p class="title">同学</p>
<ul class="list">
<li>ii</li>
<li>oo</li>
<li>pp</li>
<li>aa</li>
<li>ss</li>
</ul>
</div>
</div>
<script>
let aDiv = document.querySelectorAll("#wrap .title"),
aList = document.querySelectorAll("#wrap .list");
let len = aDiv.length;
let a=0;
for (let i=0;i<len;i++){
aDiv[i].onclick = function () {
// 点击标题div之后，遍历所有的list和标题对应的展开其他的隐藏
// 用记录值的方法最好
// for (let j=0;j<len;j++) {
// if (i===j){
// aList[j].classList.add("show");
// } else{
// aList[j].classList.remove("show");
// }
// }
// 三目改写的遍历方法
for (let j=0;j<len;j++) {
i===j?aList[j].classList.add("show"):aList[j].classList.remove("show");
let arrt = i===j?"add":"remove";
aList[j].classList[arrt]("show");
}
// 记录值的方法
// aList[a].classList.remove("show");
// a = i;
// aList[i].classList.add("show");
}
}
</script>
</body>
</html>
原文地址：https://www.cnblogs.com/zhangyu666/p/11479983.html
时间： 2024-10-12 19:41:47