jq二级目录

Posted 2020-10-05 进军码农

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  
//            });  
//        });  
//    });