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

最新推荐文章于 2024-07-19 08:43:05 发布

_Delete

最新推荐文章于 2024-07-19 08:43:05 发布

阅读量1.7k

点赞数

分类专栏： javascript 文章标签： javascript 函数对象手风琴下拉原生

本文链接：https://blog.csdn.net/hao452378531/article/details/52102383

版权

javascript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

上一篇写的原生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>