二级分类JS实现，伸缩重叠效果

二级分类JS实现，伸缩重叠效果,效果图展示如下：
以下代码如下：
<script   type="text/javascript">
var mh = 30;//最小高度
var step = 10;//每次变化的px量
var ms = 10;//每隔多久循环一次
function   toggle(o,n){
var max  = n;//最大高度
    if   (!o.tid)o.tid   =   "_"   +   Math.random()   *   100;      
    if   (!window.toggler)window.toggler   =   {};      
    if   (!window.toggler[o.tid]){      
        window.toggler[o.tid]={
            obj:o,      
            maxHeight:n,
            minHeight:mh,      
            timer:null,      
            action:-1
        };
    }     
    o.style.height   =   o.offsetHeight   +   "px";      
    if   (window.toggler[o.tid].timer)clearTimeout(window.toggler[o.tid].timer);      
    window.toggler[o.tid].action   *=   -1;      
    window.toggler[o.tid].timer   =   setTimeout("anim('"+o.tid+"')",ms   );      
}      
function   anim(id){      
    var   t   =   window.toggler[id];      
    var   o   =   window.toggler[id].obj;      
    if   (t.action   <   0){      
        if   (o.offsetHeight<=t.minHeight){      
            clearTimeout(t.timer);      
            return;      
        }      
    }
    else{      
        if(o.offsetHeight>=t.maxHeight){      
            clearTimeout(t.timer);      
            return;      
        }      
    }
    o.style.height   =   (parseInt(o.style.height,   10)   +   t.action   *   step)   +   "px";      
    window.toggler[id].timer   =   setTimeout("anim('"+id+"')",ms   );      
}      
</script>
<style   type="text/css">
.xx{border:solid 1px;overflow:hidden;height:30px;}      
.xx h5{padding:2;margin:0;height:30px;background:#f2f2f2;cursor:pointer;}      
</style>
<div class="xx"><h5 οnclick="toggle(this.parentNode,150)//最大高度手工定义">分类1</h5>
分类01<br>分类02<br>03<br>4<br>5<br>6<br>7<br>8<br>9<br>0
</div>
<div class="xx"><h5 οnclick="toggle(this.parentNode,200)">分类2</h5>
1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>0
</div>
<div class="xx"><h5 οnclick="toggle(this.parentNode,100)">分类3</h5>
1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>0
</div>

转载于:https://www.cnblogs.com/sheevy/archive/2011/06/13/2079809.html