<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body,div,p,h1,h2,h3,h4,h5,h6,ul,li,dl,dt,a,input,button,textarea,select {
margin: 0;
padding: 0;
outline: none;
}
html,body {
color: #333;
font-size: 14px;
min-width: 1200px;
}
a {
text-decoration: none;
}
ul li {
list-style: none;
}
.a-list {
width: 900px;
margin: 20px auto 20px;
}
.a-list li{
border: 1px solid #ddd;
margin-bottom: 10px;
}
.a-header {
display: flex;
align-items: center;
justify-content: space-between;
background: #f5f5f5;
padding: 10px 20px;
box-sizing: border-box;
cursor: pointer;
}
.a-icon {
font-size: 25px;
transition: 0.3s transform;
}
.a-icon-active {
transform: rotate(90deg);
}
.a-content {
padding: 10px 20px;
box-sizing: border-box;
height: 0;
opacity: 0;
transition: all 0.5s linear;
}
.a-content-active {
opacity: 1;
height: 100px;
}
</style>
</head>
<body>
<ul class="a-list">
<li class="a-li">
<div class="a-header">
<h3>aa</h3>
<p class="a-icon">▸</p>
</div>
<div class="a-content">
<p>内容</p>
</div>
</li>
<li class="a-li">
<div class="a-header">
<h3>aa</h3>
<p class="a-icon">▸</p>
</div>
<div class="a-content">
<p>内容</p>
</div>
</li>
<li class="a-li">
<div class="a-header">
<h3>aa</h3>
<p class="a-icon">▸</p>
</div>
<div class="a-content">
<p>内容</p>
</div>
</li>
<li class="a-li">
<div class="a-header">
<h3>aa</h3>
<p class="a-icon">▸</p>
</div>
<div class="a-content">
<p>内容</p>
</div>
</li>
<li class="a-li">
<div class="a-header">
<h3>aa</h3>
<p class="a-icon">▸</p>
</div>
<div class="a-content">
<p>内容</p>
</div>
</li>
</ul>
<script>
const aList = document.querySelectorAll('.a-li')
aList.forEach((item,i) => {
let aHeader = item.firstElementChild
aHeader.addEventListener('click', () => {
isClass(i)
aHeader.children[1].classList.toggle('a-icon-active')
item.children[1].classList.toggle('a-content-active')
})
})
function isClass(i) {
const aContent = document.querySelectorAll('.a-content')
const aIcon = document.querySelectorAll('.a-icon')
aContent.forEach((item, x) => {
if(i != x) {
item.className = 'a-content'
}
})
aIcon.forEach((item, y) => {
if(i != y) {
item.className = 'a-icon'
}
})
}
</script>
</body>
</html>
