原生JS手风琴下拉(修改)

来源：互联网发布：ndk r9d mac 编辑：程序博客网时间：2024/06/07 12:24

上一篇写的原生JS手风琴。有朋友说在同一页面上不能同时new两个方法。不然就会被覆盖。确实是这样。因为写法的问题所以怎么new都是引用的是一个对象；其他的会被覆盖掉.所以针对这事件，做了修改

javascript:

var hao_nav =function() {    this.NumDown=0;// 该值为点击获取的值    this.NumUp=null;// 该值为上次点击的值    this.NumSame=null;// //该值为点击时该容器高度等于传就来的值    this.timerDown=null;// 向下滑动定时器    this.timerUp=null;//  向上滑动定时器    this.timerSame=null;// 当点击时该容器高度等于传就来的高度时触发的定时器    this.containerH=0;//初始化容器高度    this.isFirst=true;//是否第一次点击    this.on=true;//开关    this.minH=null;//此为最小高度    this.maxH=null;//此为最大高度    this.classOn=null;//样式    this.json=null;    this.speed=null;//速度    //self = this;    var thatObj = this;    this.init=function(obj){        var self = this;        this.json = {};        for(var i in obj) {            this.json[i] = obj[i];        }        //console.log(self.json)        this.minH = parseInt(self.json.minH);        this.maxH = parseInt(self.json.maxH);        this.classOn = this.json.classOn;        this.speed = parseInt(self.json.speed);//console.log(typeof (this.speed))//console.log(this)        this.oNav = document.getElementById(self.json.id);        this.aSel = self.oNav.getElementsByTagName(self.json.btn);//console.log(self.json);        for(var i=0; i<this.aSel.length; i++){            this.aSel[i].index = i;            this.aSel[i].onclick = function(){               // alert(self.json.id);               // return ;            //console.log(self.json.id)                self.NumDown = this.index;//                console.log(this.NumDown)                self.containerH  = self.oNav.children[self.NumDown].offsetHeight;                // conaolw.lof                if(self.on==false){return false}//阻止定时器在运行中手贱的点击按钮二次触发                self.on=false;                if(self.isFirst&&self.containerH==self.minH){                    self.NumUp=0;                    self.isFirst=false;                }if(self.containerH==self.maxH){                    self.aSel[self.NumDown].className = '';                    self.NumUp=null;                    self.isFirst=false;                    self.NumSame=self.NumDown;//                    console.log(self.NumSame)                    self.containerSame();                    return ;                }//console.log(1)                self.containerUp();                self.containerDown();            }        }    };    this.containerDown=function(){ //向下滑动//        console.log(this.NumDown)        for(var z=0; z<thatObj.aSel.length; z++){            thatObj.aSel[z].className = '';        }        thatObj.aSel[thatObj.NumDown].className = this.classOn;        k=this.minH;        this.timerDown = setInterval(function(){            k+=thatObj.speed;            if(k>=thatObj.maxH){                k=thatObj.maxH;                thatObj.NumUp=thatObj.NumDown;                thatObj.on=true;                clearInterval(thatObj.timerDown);            }            thatObj.oNav.children[thatObj.NumDown].style.height = k+'px';        },1);    };    this.containerUp=function(){ //向上滑动//        console.log(this.NumUp)        if(this.NumUp!=null){            t=this.maxH;            this.timerUp = setInterval(function(){                t-=thatObj.speed;                if(t<=thatObj.minH){                    t=thatObj.minH;                    thatObj.on=true;                    clearInterval(thatObj.timerUp);                }                thatObj.oNav.children[thatObj.NumUp].style.height = t+'px';            },1);        }    };    this.containerSame=function(){ //当高度相等时执行的向上滑动;//        console.log(this.NumSame)        l=this.maxH;        console.log(l);        this.timerSame = setInterval(function(){            l-=thatObj.speed;            if(l<=thatObj.minH){                l=thatObj.minH;                thatObj.on=true;                clearInterval(thatObj.timerSame);            }            thatObj.oNav.children[thatObj.NumSame].style.height = l+'px';        },1);    }};

html:

<!DOCTYPE html>  <html>  <head lang="en">      <meta charset="UTF-8">      <title></title>      <style>          *{margin: 0; padding: 0;}          .nav{width: 900px; height: 300px; margin: 0 auto; background: #000000; overflow: hidden;}          .nav div{width: 900px; height: 240px; overflow: hidden;}          .nav .a{background: #ff0000;height: 240px;}          .nav .b{background: #0061ba;height: 30px;}          .nav .c{background: #dbc295; height: 30px;}          .nav a{width: 900px; height: 30px; display: block; text-align: center; color: #FFFFFF; line-height: 30px; }          .nav .on{background: #29799c;}          .nav .act{background: #ccc;}          #Nav2{margin-top: 100px;}    </style>  </head>  <body>  <div class="nav" id="Nav">      <div class="a"><a class="on" href="javascript:;">点击按钮</a></div>      <div class="b"><a href="javascript:;">点击按钮</a></div>      <div class="c"><a href="javascript:;">点击按钮</a></div>  </div>  <div class="nav" id="Nav2">      <div class="a"><a class="on" href="javascript:;">点击按钮</a></div>      <div class="b"><a href="javascript:;">点击按钮</a></div>      <div class="c"><a href="javascript:;">点击按钮</a></div>  </div>   <script src="js/json.js"></script><script></script><script>  new hao_nav().init({        id:'Nav',  //容器的ID        btn:'a', //点击的按钮          minH:30, //子容器缩小的最小值          maxH:240, //子容器的最大值不能大于总容器的高度          classOn:'on', //点击按钮样式的变化--可为空          speed:5, //速度 ,        st:0    });new hao_nav().init({        id:'Nav2', //容器的ID        btn:'a', //点击的按钮        minH:30, //子容器缩小的最小值        maxH:240, //子容器的最大值不能大于总容器的高度        classOn:'act', //点击按钮样式的变化--可为空        speed:5, //速度        st:1    })</script>  </body>  </html>

0 0