js网站加载更多内容显示和隐藏
当我们网站内容较多的时候,可以进行隐藏后面一定的内容,点击更多就能够依次显示,下方实现功能实例已列出。
js
var btn = document.querySelector('a');
var box = document.querySelector('.box').children; //获取box下面的子元素集合
function openFold(btn, box) {
let bool = true; //用于判断
let num = 0; //点击次数
btn.addEventListener('click', function() {
if (bool) { //判断当前状态是否子类都显示
if (num < box.length) { //判断点击次数不能超过box.length长度
if (num === box.length - 1) { //判断点击次数等于box.length长度的时候进行更换文本内容
this.innerText = '收起';
bool = false; //判断当前状态是否子类都显示完,显示完成返回flase,给下面关闭提供判断条件
}
box[num].style.display = 'block'; //子类根据当前点击次数一次显示
num++; //点击次数自增
}
} else if (!bool) { //判断子类都是现实完成
for (let i = 0; i < box.length; i++) {
//利用循环遍历子类集合,隐藏所有子类
box[i].style.display = 'none';
}
this.innerText = '更多';
bool = true; //隐藏之后,返回当前状态。
num = 0; //初始化点击次数
}
})
}
openFold(btn, box);
html
<div>
显示内容
</div>
<div class="box">
<div>
隐藏内容
</div>
<div>
隐藏内容
</div>
</div>
<a href="JavaScript:;">更多</a>
css
.box div {
display:none;}
广告插入