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等來添加一些動態效果，讓顯示與隱藏過渡的更加平滑。

有任何問題可在下方評論。