jq二级目录

CSS:
.qsc_nav_main .level1
{ text-align: center; height: auto; } .qsc_nav_main .level1 a { display: inline-block; font-size: 16px; height: 45px; color: #fff; } .qsc_nav_main .level2 { display: none; } .qsc_nav_main .level2 li { text-align: center; height: 45px; color: #999; }

HTML:
<div class="qsc_company_nav">
                <ul class="qsc_nav_main">
                    <li class="level1">
                        <a href="javascript:;" class="current">首页</a>
                    </li>
                    <li class="level1">
                        <a href="javascript:;">合作企业管理</a>
                        <ul class="level2">
                            <li>供应商</li>
                            <li>采购商</li>
                        </ul>
                    </li>
                    <li class="level1">
                        <a href="javascript:;">账款管理</a>
                        <ul class="level2">
                            <li>应收账款</li>
                            <li>应付账款</li>
                            <li>账款确认</li>
                        </ul>
                    </li>
                    <li class="level1">
                        <a href="javascript:;">借款管理</a>
                        <ul class="level2">
                            <li>借款</li>
                            <li>还款</li>
                        </ul>
                    </li>
                    <li class="level1">
                        <a href="javascript:;">我的中心</a>
                        <ul class="level2">
                            <li>我的中心</li>
                            <li>三方协议查询</li>
                            <li>借款协议查询</li>
                        </ul>
                    </li>
                    <li class="level1">
                        <a href="javascript:;">账户管理</a>
                    </li>
                </ul>
            </div>

JS:

/*二级菜单   显示一个二级菜单时其他的隐藏,再次点击已显示的二级菜单时,该二级菜单隐藏*/
$(".level1 > a").click(function(){
var iclass = $(this).attr("class");
if (iclass=="current"){
$(this).next().hide().prev("a").removeClass("current");
      }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  
//            });  
//        });  
//    });  

原文地址:https://www.cnblogs.com/wei-dong/p/7473031.html