原生JS手风琴仿JQ动画
使用定时器制作手风琴
写这个过程遇到的难点：
1、每次调用函数时未清理定时器，导致点击收回时，会停在一半或在路上停住，或点击这个其他的出现效果
2、关于动画速度的处理，在用style获取当前元素的高度时，获取的值是带PX的，然后用
parseInt转为数字后会导致计算速度时出现NAN，最后用getComputedStyle解决
案例还可以完善，传属性时还可以传多属性，定时器函数里面就需遍历；
<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>体育1</li> <li>体育2</li> <li>体育3</li> </ul> </div> <div class="con"> <h1>新闻</h1> <ul> <li>新闻1</li> <li>新闻2</li> <li>新闻3</li> </ul> </div> <div class="con"> <h1>娱乐</h1> <ul> <li>娱乐1</li> <li>娱乐2</li> <li>娱乐3</li> </ul> </div> </div> </body>
<script> (function () {
//获取手风琴一级导航节点 var con = document.getElementsByClassName('con');
//遍历查询是否有按键按下 for (var i = 0; i < con.length; i++) {
//添加自定义属性，用来做开关 con[i].isok = true;
//按键按下时绑定事件 con[i].children[0].onclick = function () {
//为真时打开二级导航 if (this.parentNode.isok) {
//函数传参二级的最外层节点，和改变的属性属性值 openclos(this.parentNode.children[1], { height: 120 }); this.parentNode.isok = false; } else { this.parentNode.isok = true; openclos(this.parentNode.children[1], { height: 0 }); } } } function openclos(ele, opt) {
//防止定时器叠加 clearInterval(ele.timer)
//为每个一级绑定定时器 ele.timer = setInterval(function () {
//初始值为零 var cur = 0;
//当前高度 cur = parseInt(css(ele, 'height'));
//运动速度，目标高度-当前高度/4，在收回时值目标高度为0，速度为负数 var speed = (opt.height - cur) / 4;
//取整 speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
//判断是否到临界值 if (cur == opt.height) { clearInterval(ele.timer); }
//当前高度加上速度，收回时为负数，达到高度减少的效果 ele.style.height = speed + cur + 'px'; }, 30); } })(); </script>
