原生JS带动画手风琴下拉

JS代码：

hao_nav = {
    NumDown:0,// 该值为点击获取的值
    NumUp:null,// 该值为上次点击的值
    NumSame:null,// //该值为点击时该容器高度等于传就来的值
    timerDown:null,// 向下滑动定时器
    timerUp:null,//  向上滑动定时器
    timerSame:null,// 当点击时该容器高度等于传就来的高度时触发的定时器
    containerH:0,//初始化容器高度
    isFirst:true,//是否第一次点击
    on:true,//开关
    minH:null,//此为最小高度
    maxH:null,//此为最大高度
    classOn:null,//样式
    json:null,
    speed:null,//速度
    init:function(obj){
        this.json = {};
        for(var i in obj) {
            this.json[i] = obj[i];
        }
        this.minH = parseInt(this.json.minH);
        this.maxH = parseInt(this.json.maxH);
        this.classOn = this.json.classOn;
        this.speed = parseInt(this.json.speed);
//console.log(typeof (this.speed))

        this.oNav = document.getElementById(this.json.id);
        this.aSel = this.oNav.getElementsByTagName(this.json.btn);
        for(var i=0; i=hao_nav.maxH){
                k=hao_nav.maxH;
                hao_nav.NumUp=hao_nav.NumDown;
                hao_nav.on=true;
                clearInterval(hao_nav.timerDown);
            }
            hao_nav.oNav.children[hao_nav.NumDown].style.height = k+'px';
        },1);
    },
    containerUp:function(){ //向上滑动
//        console.log(this.NumUp)
        if(this.NumUp!=null){
            t=this.maxH;
            this.timerUp = setInterval(function(){
                t-=hao_nav.speed;
                if(t<=hao_nav.minH){
                    t=hao_nav.minH;
                    hao_nav.on=true;
                    clearInterval(hao_nav.timerUp);
                }
                hao_nav.oNav.children[hao_nav.NumUp].style.height = t+'px';
            },1);
        }
    },
    containerSame:function(){ //当高度相等时执行的向上滑动;
//        console.log(this.NumSame)
        l=this.maxH;
        this.timerSame = setInterval(function(){
            l-=hao_nav.speed;
            if(l<=hao_nav.minH){
                l=hao_nav.minH;
                hao_nav.on=true;
                clearInterval(hao_nav.timerSame);
            }
            hao_nav.oNav.children[hao_nav.NumSame].style.height = l+'px';
        },1);
    }
}

HTML代码：

    
    
    



    
点击按钮
    
点击按钮
    
点击按钮

这是自己写的小组件，有不足的地方可以提出。一起交流,共同学习