最近在做web应用,没有用Jquery,只好用原生的js来写,很简单的功能,还优化了一天,代码相对简单,小白易懂,点击右边小图标下拉和收缩。
<style>
body{background: #f7f7f7;}
.fluid{font-family: "微软雅黑";width: 360px;margin: 0px auto;line-height: 40px;}
header{background: #428bf9;color: #fff;text-align: center;}
ul{margin: 5px auto;font-size: 14px;background: #fff;position: relative;}
ul,li{list-style: none;}
li{line-height: 24px;}
.prop{float: left;}
ul span{color: #888;}
.arrow{color: #ff7e00;position: absolute;right: 30px;}
</style>
html代码(点击部分可在#list1的ul里面,也可在外面,主要是点击的时候把this传过去,最好不要把onclick写在html里面,但我这小白,暂时不想再去优化了)
<div class="fluid">
<header>纯js展开收缩</header>
<ul class="list" id="list1" style="overflow: hidden;">
<li class="grid"><div class="prop">案件号:</div><span>32454545</span><span class="arrow" οnclick="fn(this,1)">折叠</span></li> //id的数值与onclick里面的一样,到时候改成动态的时候,循环出来即可
<li class="grid"><div class="prop">当前环节:</div><span>一级部门</span></li>
<li class="grid"><div class="prop">案件来源:</div><span>城管部门</span></li>
<li class="grid"><div class="prop">来件时间:</div><span>2015-10-20</span></li>
<li class="grid"><div class="prop">责任单位:</div><span>桂城街道办事处</span></li>
<li class="grid"><div class="prop">问题描述:</div><span>外墙违规贴广告</span></li>
</ul>
<ul class="list" id="list2" style="overflow: hidden;">
<li class="grid"><div class="prop">案件号:</div><span>32454545</span><span class="arrow"οnclick="fn(this,2)">折叠</span></li>
<li class="grid"><div class="prop">当前环节:</div><span>一级部门</span></li>
<li class="grid"><div class="prop">案件来源:</div><span>城管部门</span></li>
<li class="grid"><div class="prop">来件时间:</div><span>2015-10-20</span></li>
<li class="grid"><div class="prop">责任单位:</div><span>桂城街道办事处</span></li>
<li class="grid"><div class="prop">问题描述:</div><span>外墙违规贴广告</span></li>
</ul>
</div>
js代码
<script>
/*展开收缩*/
var aa=0;
var cc=0;
function fn(shrink,tag){
aa=document.getElementById("list"+tag).clientHeight;
cc=document.getElementById("list"+tag).childElementCount;
if(shrink.innerHTML == "折叠"){//通过文字展开,判断它现在是向上还是向下的状态,可根据自己需要修改判断条件
if (aa >= 2*25){//折叠之后的高度
document.getElementById("list"+tag).style.height = (aa-3) + "px";
setTimeout(function(){fn(shrink,tag)},1);//定时器,让它不断循环执行,慢慢折叠
} else {
shrink.innerHTML = "展开";//收缩完之后,变换文字
}
} else {
if (aa < cc*24){//展开之后的高度
document.getElementById("list"+tag).style.height = (aa+3) + "px";
setTimeout(function(){fn(shrink,tag)},1);//定时器,让它不断循环执行,慢慢展开
} else {
shrink.innerHTML = "折叠";
}
}
}
</script>