js
// 加载更多
var more=document.getElementsByClassName("more");
var pack=document.getElementsByClassName("pack");
var contentHide=document.getElementsByClassName("contentHide");
for(var i=0;i<more.length;i++){
more[i].setAttribute("index",i);
more[i].onclick=function(){
var num=this.getAttribute("index");
for(var j=0;j<contentHide.length;j++){
if(contentHide[j]==contentHide[num]){
contentHide[j].style.display="block";
more[j].style.display="none";
pack[j].style.display="block";
}
}
}
}
//点击收起
for(var i=0;i<pack.length;i++){
pack[i].setAttribute("index",i);
pack[i].onclick=function(){
var num=this.getAttribute("index");
for(var j=0;j<contentHide.length;j++){
if(contentHide[j]==contentHide[num]){
contentHide[j].style.display="none";
more[j].style.display="block";
pack[j].style.display="none";
}
}
}
}
html:
<div class="contentHide"></div>
<div class="more" onclick="more">加载更多</div>
<div class="pack" onclick="hideHandle">点击收起</div>
在点击加载更多的时候内容就会显现出来.