原生js实现手风琴菜单效果 与 css3的过渡实现手风琴效果

最近学了css3的变形、过渡和动画，写了一个用css3手风琴菜单的效果，又想着用原生JavaScript来实现手风琴菜单效果。感觉挺有意思的，现在给大家分享一下。

1、css3实现手风琴效果

<style>
    *{margin: 0;padding: 0;list-style: none;}
    .box {width: 500px; background: #1c47ff;margin: 100px auto;}
    .box ul li h2{width: 500px;height: 35px;line-height: 35px;
        text-align: center;border: 1px solid #25fff5; }
    .box li:hover .txt{height: 300px;transition: all 1s;}
    .txt{overflow: hidden; height: 0;background:pink;}
style>

<div class="box">
    <ul>
        <li>
            <h2>手风琴h2>
            <div class="txt">内容1div>
        li>
        <li>
            <h2>手风琴h2>
            <div class="txt">内容2div>
        li>
        <li>
            <h2>手风琴h2>
            <div class="txt">内容3div>
        li>
        <li>
            <h2>手风琴h2>
            <div class="txt">内容4div>
        li>
    ul>
div>

感觉代码很少，就是通过transition来实现li元素高度的过渡。不过感觉还是有点毛病，在鼠标移上的时候就会突然全部收起来。下面看看原生js的代码。

2、原生js实现手风琴效果

和上面的比原生js实现手风琴菜单就麻烦的多了，不知道是不是我技术的事，求高人指点。

1）HTML代码

<div id="wrap">
    <ul id="main">
        <li>
            <h4>手风琴菜单h4>
            <div class="con">内容1div>
        li>
        <li>
            <h4>手风琴菜单h4>
            <div class="con">内容2div>
        li>
        <li>
            <h4>手风琴菜单h4>
            <div class="con">内容3div>
        li>
        <li>
            <h4>手风琴菜单h4>
            <div class="con">内容4div>
        li>
    ul>
div>

2）js代码

<script>
//分别获取要操作的标签
    var maim = document.getElementById('main');
    var lis = main.getElementsByTagName('li');
    var div = document.getElementsByTagName('div');
    // 定义一个函数用来通过类名获取元素，因为IE678不支持getElementdByClass所以通过以下函数来解决兼容问题
    function byClass(parentID,oClass){
        var parent=document.getElementById(parentID);//找到需要查找去块的最外层父级
        var tags=parent.all?parent.all:parent.getElementsByTagName('*');//得到父级里的所有子元素
        var arr=[];
        var reg = new RegExp('\\b'+ oClass + '\\b','g');//定义一个正则表达式来匹配需要查找的内容
        for (var i = 0; i < tags.length; i++) {
            reg.lastIndex = 0;//重置匹配的位置
            if (reg.test(tags[i].className)) {
                arr.push(tags[i]);//将匹配到类名符合的元素插入到数组当中
            };
        };
        return arr;
    }
    var di = byClass('main','con');
    var ti1 = null,ti2 = null,ti3 = null,ti4 = null;
    var hei4 = 0,hei1 = 0,hei2 = 0,hei3 = 0;
    var timer1 = null,timer2 = null,timer3 = null,timer4 = null;
    //用来控制手风琴列表的函数，主要是通过改变li元素的高度来实现手风琴效果
    function accorMenu(index,timer,n,tix,classN,lisN){
        lisN[index].onmouseenter = function () {
            clearTimeout(tix);//为了避免计时器乱，在新建一个计时器前先清除一个计时器
            tix = setTimeout(function () {//定义一个一次性定时器来实现鼠标移上的延迟
                clearInterval(timer);
                timer = setInterval(function () {//定义一个循环计时器来实现高度变化的动画效果
                    n+=5;
                    if(n >= 300){
                        n = 300;
                        clearInterval(timer);
                    }
                    classN[index].style.height = n + 'px';
                },10);
            },200);
        }
        lisN[index].onmouseleave = function () {
            clearTimeout(tix);
            tix = setTimeout(function () {//定义一个一次性定时器来实现鼠标移出的延迟
            clearInterval(timer);
                timer = setInterval(function () {//定义一个循环计时器来实现高度变化的动画效果
                    n -= 5;
                    if(n <= 0){
                        n = 0;
                        clearInterval(timer);
                    }
                    classN[index].style.height = n + 'px';
                },10);
            },200);
        }
    }
    accorMenu(0,timer1,hei1,ti1,di,lis);//新建一层手风琴
    accorMenu(1,timer2,hei2,ti2,di,lis);
    accorMenu(2,timer3,hei3,ti3,di,lis);
    accorMenu(3,timer4,hei4,ti4,di,lis);
script>

代码是那么长。