javascript展开和折叠
文章描述：
javascript点击展开和折叠效果
html
<div class="blist">
<ul>
<li> <span>王**</span> <span>138******69</span> <span>05月24日</span> <span>详细</span> </li>
<div class="xlist hide">
<div>内容</div>
</div>
<li> <span>张**</span> <span>133******21</span> <span>05月20日</span> <span>详细</span> </li>
<div class="xlist hide">
<div>内容</div>
</div>
<li> <span>季**</span> <span>139******88</span> <span>05月15日</span> <span>详细</span> </li>
<div class="xlist hide">
<div>内容</div>
</div>
<li> <span>黄**</span> <span>130******00</span> <span>05月12日</span> <span>详细</span> </li>
<div class="xlist hide">
<div>内容</div>
</div>
<li> <span>陈**</span> <span>187******52</span> <span>05月05日</span> <span>详细</span> </li>
<div class="xlist hide">
<div>内容</div>
</div>
</ul>
</div>style
* {
margin: 0;
padding: 0;
}
.blist {
padding: 100px 100px;
}
.blist ul li {
margin-bottom: 20px;
}
.xlist {
padding: 5px 10px;
background: #eee;
}
.hide {
display: none;
}
.hover {
}
javascript
var blist = document.querySelectorAll(".blist ul li");
var xlist = document.querySelectorAll(".xlist");
console.log(blist);
console.log(xlist);
for(let i=0;i<blist.length;i++){
(function(i){
blist[i].addEventListener("click",function(){
//console.log(i)
for(let j=0;j<xlist.length;j++){
//console.log(j);
if(j==i){
//console.log(xlist[j].classList)
//console.log(xlist[j].classList[1])
if(xlist[j].classList[1] == 'hover'){
xlist[j].classList.add('hide')
xlist[j].classList.remove('hover')
}else if(xlist[j].classList[1] == 'hide'){
xlist[j].classList.add('hover')
xlist[j].classList.remove('hide')
}
}else{
xlist[j].classList.add('hide')
xlist[j].classList.remove('hover')
}
//xlist[j].classList.add('hide')
//xlist[j].classList.remove('hover')
}
//blist[i].parentNode.querySelectorAll('.xlist')[i].classList.remove('hide')
//blist[i].parentNode.querySelectorAll('.xlist')[i].classList.add('hover')
})
})(i)
}
发布时间：2022/06/30
发表评论