纯js折叠面版

最近在做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>