html ul li 首页渲染多条数据 但只展示八条，其余的数据全部隐藏，通过icon图标 进行展示
<div style="float: left;" id="showMore"> 展开 </div>
<div style="float: left;“id="hideLess"> 收起 </div>
var data = document.querySelectorAll('.allbox .item h3 a');
const list = document.querySelectorAll('.all-sort-list .item h3 a');
data.forEach((item, index) => {
if (index === 7) {
document.querySelector("#showMore").style.display = "block"
}
});
var listItems = document.querySelectorAll('.all-sort-list .item');
if (listItems.length > 8) {
for (var i = 8; i < listItems.length; i++) {
listItems[i].style.display = 'none';
}
document.getElementById('showMore').style.display = 'block';
document.getElementById('hideLess').style.display = 'none';
}
// 展开
document.getElementById('showMore').addEventListener('click', function () {
var listItems = document.querySelectorAll('.allbox .item');
if (listItems.length > 8) {
for (var i = 8; i < listItems.length; i++) {
listItems[i].style.display = 'block';
listItems[i].className+= " wrap_item";
}
document.getElementById('showMore').style.display = 'none';
document.getElementById('hideLess').style.display = 'block';
}
});
// 收起
document.getElementById('hideLess').addEventListener('click', function () {
var listItems = document.querySelectorAll('.all-sort-list .item');
if (listItems.length > 8) {
for (var i = 8; i < listItems.length; i++) {
listItems[i].style.display = 'none';
}
document.getElementById('showMore').style.display = 'block';
document.getElementById('hideLess').style.display = 'none';
}
});
.wrap1 {
bottom: 0px;
left: 0px;
float: left;
position: relative;
z-index: 3;
width: 198px;
height: 100%;
background: #2a86dd;
}
.allbox {
position: relative;
width: 195px;
border: 1px solid #2a86dd;
border-top: none;
padding: 1px;
}
#showMore {
display: inline-block;
width: 20px;
height: 20px;
color: #fff;
display: none;
}
#hideLess{
display: inline-block;
width: 20px;
height: 20px;
color: #fff;
display: none;
}
.item:hover #showMore {
color: #f00;
}
.item:hover #hideLess {
color: #f00;
}
.wrap_item{
width: 200px;
height: 45px;
line-height: 45px;
background-color: #09f;
color: #fff;
}
数据结构
<div class="boxCur">
<div class="wrap1">
<div class="allbox">
<div class="item bo">