Native JS accordion imitation JQ animation

Use a timer to make the accordion

The difficulties encountered in the process of writing:

　　1, the cleaning up of the timer each time the function is called, leading to withdraw when clicked, will stop at the half on the road or stopped, or click on the emergence of other effects

　　2, on the processing speed of the animation, when the height of the current acquired by the style element, is the value obtained with the PX, followed by

After parseInt will lead to digital NAN when computing speed, and finally solve getComputedStyle

Cases can also be improved, mass transfer properties can have multiple attribute, a timer function which would need to traverse;

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        #box {
            margin: 50px;

        }

        #box h1 {
            width: 120px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            background: lightblue;
            cursor: pointer;
            font-size: 24px;
            font-weight: lighter;
            border: 1px solid #000;
        }

        #box .con {
            width: 120px;
            height: auto;
        }

        #box ul {
            height: 0;
            overflow: hidden;
            transition: all .5s;
        }

        #box ul li {
            width: 120px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            background: lightcyan;
        }
    </style>

</head>

<body>
    <div id="box">
        <div class="con">
            <h1>体育</h1>
            <ul>
                <li>Sports 1 </ li > 
                < li > Sports 2 </ li > 
                < li > Sports 3 </ li > 
            </ ul > 
        </ div > 
        < div class = "CON" > 
            < h1 > News </ h1 > 
            < ul > 
                < Li > News. 1 </ Li > 
                < Li > News 2 </ Li > 
                <li > News 3</li>
            </ul>
        </div>
        <div class="con">
            <h1>娱乐</h1>
            <ul>
                <li>娱乐1</li>
                <li>娱乐2</li>
                <li>娱乐3</li>
            </ul>
        </div>
    </div>
</body>

View Code

<Script> 
    ( function () { 
　　　　// Get an accordion navigation node
         var CON = document.getElementsByClassName ( 'CON' ); 
　　　　// check whether the key is pressed traversal
         for ( var I = 0; I <con.length; ++ I ) { 
　　　　　　　　// add custom properties, used for switching 
            CON [I] .isok = to true ; 
　　　　　　binding event key is pressed // 
            CON [I] .children [ 0] .onclick = function () { 
　　　　　　　　　　// to open the second navigation true
                 IF ( the this .parentNode.isok) { 
　　　　　　　　　　　　// function parameter passing two outermost nodes, attributes, and attribute values change 
                    openclos ( the this.parentNode.children [. 1 ], { 
                        height: 120 
                    }); 
                    the this .parentNode.isok = to false ; 
                } the else {
                     the this .parentNode.isok = to true ; 
                    openclos ( the this .parentNode.children [. 1 ], { 
                        height: 0 
                    } ); 

                } 

            } 
        } 

        function openclos (ELE, opt) { 
　　　　　　// timer superposition preventing 
            the clearInterval (ele.timer) 
　　　　　　// a timer for each binding
            ele.timerThe setInterval = ( function () { 
　　　　　　　　　　// an initial value of zero
                 var CUR = 0 ; 
　　　　　　　　　　// current height 
                CUR = the parseInt (CSS (ELE, 'height' )); 
　　　　　　　　　　// velocity, the target height - current altitude / 4, the recovery time when the target height is 0, the speed is negative
                 var speed = (opt.height - CUR) /. 4 ; 
　　　　　　　　　　// rounding 
                speed = speed> 0? Math.ceil (speed): Math.floor (speed); 
　　　　　　　　　　// determining whether the threshold
                 iF (CUR == opt.height) { 
                    the clearInterval (ele.timer); 
                }
　　　　　　　　　　// height plus the current speed, negative retracted to a height reduction effect 
                ele.style.height = CUR + + Speed 'PX' ; 
            }, 30 ); 
        } 
    }) ();
 </ Script>

Native JS accordion imitation JQ animation

Guess you like