纯html+css+js手风琴web效果

这是一个纯手工的手风琴的web效果，没有借助jq以及其他乱七八糟的框架，下图是我更改过后的，这边放的代码是最原始的，喜欢的拿去改。

原生截图是酱紫的（这里多亏小白兔的帮忙，他的网站是http://wp.dabaitui.cn/）

手风琴css

* {
margin: 0;
padding: 0;
}

#czh-ul {
list-style: none;
width: 400px;
margin: 10px;
padding: 0;
}

#czh-ul li {
background: #ccc;
list-style: none;
margin: 0 0 1px 0;
padding: 0;
transition: height 0.5s; /* 添加过渡效果 */
}

#czh-ul li.czh {
height: 100px; /* 展开时的高度 */
}

#czh-ul li h3 {
font-size: 13px;
color: #fff;
background: #666;
padding: 5px;
cursor: pointer;
}

#czh-ul li div {
display: none;
padding: 5px;
height: 80px;
}

手风琴html

<div>
<ul id="czh-ul">
<li>
<h3>acctit01</h3>
<div>accdiv01</div>
</li>
<li>
<h3>acctit02</h3>
<div>accdiv02</div>
</li>
<li>
<h3>acctit03</h3>
<div>accdiv03</div>
</li>
<li>
<h3>acctit04</h3>
<div>accdiv04</div>
</li>
<li>
<h3>acctit05</h3>
<div>accdiv05</div>
</li>
<li>
<h3>acctit06</h3>
<div>accdiv06</div>
</li>
</ul>
</div>

手风琴js

const lis = document.querySelectorAll('#czh-ul li')
function init(){
for(let i = 0; i < lis.length; i++){
lis[i].classList.remove('czh')
}
lis[lis.length-1].classList.add('czh')
}
document.querySelector('#czh-ul').addEventListener('mouseenter',function(){
for(let i = 0; i < lis.length; i++){
lis[i].addEventListener('mouseover',function(){
for(let index = 0; index < lis.length; index++){
lis[index].classList.remove('czh')
}
this.classList.add('czh')
})
lis[i].addEventListener('mouseout',function(){
lis[i].classList.remove('czh')
})
}
})
document.querySelector('#czh-ul').addEventListener('mouseout',function(){
init()
})
init()