手风琴效果
2019-03-11 本文已影响0人
Wo信你个鬼
s.png
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
list-style: none;
}
.web ul {
overflow: hidden;
}
.web li {
width: 100px;
height: 500px;
float: left;
cursor: pointer;
transition: 500ms;
}
.title {
width: 20px;
margin: 230px auto;
}
.web li:nth-child(1) {
background: skyblue;
}
.web li:nth-child(2) {
background: pink;
}
.web li:nth-child(3) {
background: gray;
}
.web li:nth-child(4) {
background: gold;
}
.content {
display: none;
}
li:nth-child(1) .title {
display: none;
}
li:nth-child(1) .content {
display: block;
}
.web li:nth-child(1) {
width: 300px;
}
</style>
</head>
<body>
<div class="web">
<ul>
<li>
<div class="title">标题1</div>
<div class="content">内容1</div>
</li>
<li>
<div class="title">标题2</div>
<div class="content">内容2</div>
</li>
<li>
<div class="title">标题3</div>
<div class="content">内容3</div>
</li>
<li>
<div class="title">标题4</div>
<div class="content">内容4</div>
</li>
</ul>
</div>
<script type="text/javascript">
/**var aLi = document.querySelectorAll(".web li");
var isClick = true;
for(var i=0;i<aLi.length;i++){
aLi[i].addEventListener("transitionend",function(){//动画结束后触发
isClick = true;
console.log(isClick);
})
aLi[i].addEventListener("click",function(){
//console.log(this);
if(isClick==true && this.offsetWidth == 100){
for(var j=0;j<aLi.length;j++){
aLi[j].style.width = "100px";
aLi[j].children[0].style.display = "block";
aLi[j].children[1].style.display = "none";
}
this.style.width = "300px";
this.children[0].style.display = "none";
this.children[1].style.display = "block";
isClick = false;
}
})
}*/
let allLi = document.querySelectorAll("li"),
allContent = document.querySelectorAll(".content");
let isTransitionend = true;
for(let i = 0; i < allLi.length; i++) {
allLi[i].addEventListener('transitionend', () => {
isTransitionend = true;
})
allLi[i].addEventListener("mousedown", () => {
if(isTransitionend == true && allLi[i].offsetWidth == 100) {
isTransitionend = false;
for(let j = 0; j < allLi.length; j++) {
allLi[j].children[1].style.display = "none";
allLi[j].children[0].style.display = "block";
allLi[j].style.width = "100px";
}
allLi[i].children[0].style.display = "none";
allLi[i].children[1].style.display = "block";
allLi[i].style.width = "300px";
}
})
}
</script>
</body>
</html>
<!--329686792--> <!-- 682095145-->
