Js制作手风琴
关于JavaScript，我对其有简单的认识，并且 关于制作手风琴的时候使用addEventListener可能会只绑定一个按钮的事件，因此使用下面代码的方法制作一个手风琴吧
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Accordion</title>
<style>
* {
margin: 0;
padding: 0;
}
.wrapper {
display: block;
width: 80%;
margin: 0 auto;
}
.list-item {
display: block;
width: 300px;
height: 50px;
background: rgba(12, 12, 12, .3);
line-height: 50px;
text-align: center;
border-bottom: 1px solid rgba(12, 12, 12, .5);
cursor: pointer;
}
.list-item:hover {
background: rgba(111, 111, 111, .8);
color: white;
}
.list ul {
display: none;
}
.list ul li {
display: block;
width: 300px;
height: 30px;
background: rgba(100, 100, 100, .3);
line-height: 30px;
text-align: center;
border-bottom: 1px solid rgba(12, 12, 12, .3);
}
</style>
</head>
<body>
<div class="wrapper">
<div class="list">
<p class="list-item">文件</p>
<ul>
<li><a href="#">hello</a></li>
<li><a href="#">hello</a></li>
<li><a href="#">hello</a></li>
</ul>
</div>
<div class="list">
<p class="list-item">编辑</p>
<ul>
<li><a href="#">hello</a></li>
<li><a href="#">hello</a></li>
<li><a href="#">hello</a></li>
</ul>
</div>
</div>
<script>
var listItem = document.getElementsByClassName("list-item");
for(var i=0;i<listItem.length;i++){
listItem[i].addEventListener("click", function(){
if(this.nextElementSibling.style.display=="block"){
this.nextElementSibling.style.display = "none";
}else{
this.nextElementSibling.style.display="block";
}
},false);
// console.log(listItem[i].nextElementSibling.childElementCount);
}
</script>
</body>
</html>
