jq与JS点击显示隐藏二级菜单的几种方法

//以下是JQ的方法，链式操作一行搞定！
<div class="content">
    <ul>
        <li class="level1">
            <a href="#" class="current">喇叭裤</a>
            <ul class="level2" style="display: block"> //初始化一个二级菜单显示
                <li>短裤1</li>
                <li>短裤</li>
                <li>短裤</li>
            </ul>
        </li>
        <li class="level1">
            <a href="#" >喇叭裤</a>
            <ul class="level2">
                <li>短裤1</li>
                <li>短裤</li>
                    <li>短裤</li>
            </ul>
        </li>
        <li class="level1">
            <a href="#" >喇叭裤</a>
            <ul class="level2">
                <li>短裤1</li>
                <li>短裤2</li>
                <li>短裤3</li>
            </ul>
        </li>
    </ul>
</div>
</body>
<script>

                                                 第一种方法：显示一个二级菜单时其他的隐藏，再次点击已显示的二级菜单时，该二级菜单隐藏

//    $(".level1 > a").click(function(){
//        var iclass = $(this).attr("class");
//        if (iclass=="current"){
//            $(this).next().hide();
//        }else {
//            $(this).addClass("current").next().show()
//                    .parent().siblings()
//                    .children("a").removeClass("current").next().hide();  
//            return false;
//        }
//    });


                                             第二种方法：可同时显示多个二级菜单，点击显示/隐藏


 $(function(){
       $(".level1 > a").click(function(){
          $(this).next().toggle(800,function(){              
              //TODO
          });
       });
    });

//    $(function(){
//        $(".level1 > a").click(function(){
//            $(this).next().slideToggle(800,function(){        //滑动
//                //TODO
//            });
//        });
//    });
</script>

下面是原生JS实现的代码:

<span style="font-size:12px;"><div class="container">
    <ul class="menue">
        <li>
            <span>水果</span>
            <ul class="sub-menue">
                <li>橙子</li>
                <li>苹果</li>
            </ul>
        </li>
        <li>
            <span>水果</span>
            <ul class="sub-menue">
                <li>橙子</li>
                <li>苹果</li>
            </ul>
        </li>
        <li>
            <span>水果</span>
            <ul class="sub-menue">
                <li>橙子</li>
                <li>苹果</li>
            </ul>
        </li>
    </ul>
</div>
<script>

    var parent = document.getElementsByClassName('menue')[0];
    parent.οnclick=function (event) {
        var e = event || window.event,
                source = e.target||e.srcElement;
        if (source.tagName.toLowerCase() == 'span' ){
            var next = getNextSibling(source);
            toggleClass(next,'show');
            var parent = source.parentNode;
            var parentSiblings = getAllSiblings(parent);
            for( var i = 0 ;i<parentSiblings.length; i++){
                var secondMenue = getLastSibling(parentSiblings[i]),
                        classIndex = secondMenue.className.indexOf('show');
                if(classIndex != -1){
                    secondMenue.className = secondMenue.className.slice(0,classIndex);
                }
            }
        }else {
            return false;
        }
        stopPropagation(e);
    };
    function stopPropagation(e) {
        if (e.stopPropagation) {
            e.stopPropagation();
        } else {
            e.cancelBubble = true;
        }
    }
    function getNextSibling(obj){
        var result = obj.nextSibling || obj.nextElementSibling;
        while (result.nodeType != 1 ){
            result = result.nextSibling || result.nextElementSibling;
            if (result == null){
                break;
            }
        }
        return result;
    }
    function getPreviousSibling(obj){
        var result = obj.previousSibling || obj.previousElementSibling;
        while (result.nodeType != 1 ){
            result = result.previousSibling || result.previousElementSibling;
            if (result == null){
                break;
            }
        }
        return result;
    }
    function getLastSibling(obj){
        var result = obj.lastChild || obj.lastElementChild;
        while (result.nodeType != 1 ){
            result = result.previousSibling;
            if (result == null){
                break;
            }
        }
        return result;
    }
    function getAllSiblings(obj) {
        var arr  = [],
                previous =getPreviousSibling(obj) ,
                next = getNextSibling(obj);
        while(previous!= null){
            arr.push(previous);
            previous = getPreviousSibling(previous);
        }
        while (next != null){
            arr.push(next);
            next = getNextSibling(next);
        }
        return arr.reverse();
    }
    function toggleClass(obj,cName) {
        var index = obj.className.indexOf(cName);
        if ( index === -1){
            obj.className +=' '+cName;
        }else {
            obj.className = obj.className.slice(0,index);
        }
    }
</script></span>

            以上代码兼容了IE并且把可重用的方法提取了出来，同时使用了事件代理来减少对DOM的操作来减少回流与重绘。原声JS操作看起来代码多了许多，但还是与JQ同样的思路，当点击一级菜单的时候，显示二级菜单，并且把其他的二级菜单关闭，而关闭与显示的操作的原理即为添加与删除class，我们可以通过transform animate等来添加一些动态效果，让显示与隐藏过渡的更加平滑。

有任何问题可在下方评论。