手风琴菜单—基于原生js

<script type="text/javascript">
        //获取所有的span
        var span = document.getElementsByClassName("menuSpan");
        
        var openDiv = span[0].parentElement;
        //遍历span
        for(var i=0 ; i<span.length ; i++){
            //为每一个span绑定点击事件
            span[i].onclick = function(){
                //获取当前点击的span的父元素
                var parentDiv = this.parentElement;
                toggleMove(parentDiv);
                //判断openDiv和parentDiv是否相同
                if(openDiv != parentDiv && !hasClass(openDiv,"collapsed")){
                    //打开菜单以后，应该关闭之前的菜单
                    //为了统一处理动画效果，故将addClass改成toggleClass
                    // addClass(openDiv,"collapsed");
                    //此处的toggleClass不需要有移除样式的功能
                    //toggleClass(openDiv,"collapsed");
                    toggleMove(openDiv);
                }
                //修改openDiv为当前打开的菜单
                openDiv = parentDiv;
            }
        }

        //原来切换菜单折叠和显示状态
        function toggleMove(obj){
            //在切换类之前，获取元素的高度
            var begin = obj.offsetHeight;
            //切换元素的显示
            toggleClass(obj,"collapsed");
            //在完成切换之后，元素的高度
            var end = obj.offsetHeight;
            //动画效果就是高度从begin向end过渡
            //重置元素的高度为begin
            obj.style.height = begin + "px";
            //执行动画，从begin向end过渡
            move(obj,"height",end,20,function(){
                //动画执行完毕，内联样式没有意义，将其赋予空字符串，即可恢复原来的行间样式
                obj.style.height = "";
            });
        }

        function hasClass(obj,cn){
            var reg = new RegExp("\\b" + cn + "\\b");
            return reg.test(obj.className);
        };
        function addClass(obj,cn){
            if(!hasClass(obj,cn)){
                obj.className += " " + cn;
            };
        };
        function removeClass(obj,cn){
            var reg = new RegExp("\\b" + cn + "\\b");
            obj.className = obj.className.replace(reg," ");
        };
        function toggleClass(obj,cn){
            if(hasClass(obj,cn)){
                removeClass(obj,cn)
            }else{
                addClass(obj,cn);
            };
        };

        // 参数：
        // obj:要执行动画的对象；
        // attr:要执行动画的样式，如"left" "top" "height" "width"
        //target: 执行动画的目标位置
        //speed：移动的速度
        //callback：回调函数，将在动画执行完毕后执行
        
        // var timer;
        function move(obj,attr,target,speed,callback){
            clearInterval(obj.timer);//关闭上一个定时器
            var current = parseInt(getStyle(obj,attr));//获取obj当前位置
            if(current > target){
                speed = - speed;//如果当前位置大于目标位置，应该向左移动，速度为负值
            }
            obj.timer = setInterval(function(){
                var oldValue = parseInt(getStyle(obj,attr));//获取obj原来的位置
                var newValue = oldValue + speed;//设置obj移动
                if((speed < 0 && newValue < target) || (speed > 0 && newValue > target)){
                    newValue = target;//不能让移动超过边界
                }
                obj.style[attr] = newValue + "px";//设置obj现在的位置

                if(newValue == target){//如果obj到达目标位置，则停止移动，清除定时器
                clearInterval(obj.timer);
                callback && callback();
            }
            },30);
            
        };

        function getStyle(obj,name){
            if(window.getComputedStyle){
                return getComputedStyle(obj,null)[name];
            }else{
                return obj.currentStyle[name];
            };
        }
</script>

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .collapsed{
            height: 35px;
            overflow: hidden;
        }
        .box{
            margin: 0px auto;
            width: 200px;
        }
        .menuSpan{
            height: 35px;
            box-sizing: border-box;
            color: #fff;
            background-color: brown;
            opacity: 0.8;
            padding: 0px 15px;
            display: block;
            border: 1px solid #eee;
            line-height: 35px;
            font-size: 22px;
        }
        .menuSpan:hover{
            opacity: 0.6;
        }
        .box a{
            color: burlywood;
            background-color: #f7f7f7;
            display: block;
            border: 1px solid #eee;
            line-height: 35px;
            padding: 0 20px;
            font-size: 16px;
        }
        .box a:hover{
            opacity: 0.6;
        }
        
    </style>

<div>
        <div class="box">
            <span class="menuSpan">傻瓜</span>
            <a href="#">南瓜</a>
            <a href="#">南瓜</a>
            <a href="#">南瓜</a>
            <a href="#">南瓜</a>
        </div>
        <div class="collapsed box">
            <span class="menuSpan">傻瓜</span>
            <a href="#">南瓜</a>
            <a href="#">南瓜</a>
            <a href="#">南瓜</a>
            <a href="#">南瓜</a>
            <a href="#">南瓜</a>
            <a href="#">南瓜</a>
            <a href="#">南瓜</a>
            <a href="#">南瓜</a>
        </div>
        <div class="collapsed box">
            <span class="menuSpan">傻瓜</span>
            <a href="#">南瓜</a>
            <a href="#">南瓜</a>
            <a href="#">南瓜</a>
        </div>
        <div class="collapsed box">
            <span class="menuSpan">傻瓜</span>
            <a href="#">南瓜</a>
            <a href="#">南瓜</a>
            <a href="#">南瓜</a>
            <a href="#">南瓜</a>
            <a href="#">南瓜</a>
            <a href="#">南瓜</a>
        </div>
    </div>