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

来源：互联网发布：云计算怎么实现编辑：程序博客网时间：2024/06/02 04:08

//以下是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.onclick=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等来添加一些动态效果，让显示与隐藏过渡的更加平滑。

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

0 0