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

https://blog.csdn.net/SuperCoooooder/article/details/50755427

 

 

//以下是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>
--------------------- 
作者：ServerWang 
来源：CSDN 
原文：https://blog.csdn.net/SuperCoooooder/article/details/50755427 
版权声明：本文为博主原创文章，转载请附上博文链接！