🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
jQuery多級menu ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQuery多級menu</title> <link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/font-awesome.4.6.0.css"> <style> .navbar-nav>li>ul.dropdown-menu { display: none; list-style: none; clear: both; margin: 8px 0px 0px 10px; padding-bottom: 5px; } </style> </head> <body> <ul class="navbar-nav"> <li> <a href="javascript:;" > <i class="icon_1"></i> <span class="">主页</span> <span class="arrow"></span> </a> <ul class="dropdown-menu"> <li><a href="javascript:;"><span>用户管理</span></a></li> <li > <a href="javascript:;" ><span>个人信息</span><span class="arrow"></span></a> <ul class="dropdown-menu"> <li><a href="javascript:;" ><span>我的个人资料</span></a></li> <li><a href="javascript:;"><span>我的日历</span></a></li> </ul> </li> </ul> </li> <li class=""> <a href="javascript:;" ><i class="my-icon nav-icon icon_2"></i><span>文章管理</span></a> </li> <li > <a href="javascript:;" > <i class="icon_3"></i> <span class="nav-text">统计报表</span> <span class="arrow"></span> </a> <ul class="dropdown-menu"> <li><a href="javascript:;" ><span>发运表</span></a></li> <li><a href="javascript:;"><span>发运结算表</span></a></li> <li > <a href="javascript:;" ><span>打印</span><span class="arrow"></span></a> <ul class="dropdown-menu"> <li><a href="javascript:;" ><span>发运结算表</span></a></li> <li><a href="javascript:;"><span>应收发运单</span></a></li> </ul> </li> <li > <a href="javascript:;" ><span>数据查询</span><span class="arrow"></span></a> <ul class="dropdown-menu"> <li><a href="javascript:;" ><span>发运单查询</span></a></li> <li><a href="javascript:;"><span>自营车查询</span></a></li> <li > <a href="javascript:;" ><span>报账明细</span><span class="arrow"></span></a> <ul class="dropdown-menu"> <li><a href="javascript:;" ><span>报账明细1</span></a></li> <li><a href="javascript:;"><span>报账明细1</span></a></li> <li > <a href="javascript:;" ><span>自营车汇总表</span><span class="arrow"></span></a> <ul class="dropdown-menu"> <li><a href="javascript:;" ><span>自营车汇总表1</span></a></li> <li><a href="javascript:;"><span>自营车汇总表2</span></a></li> </ul> </li> </ul> </li> </ul> </li> </ul> </li> </ul> <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script> $(function() { // nav收缩展开 $('.navbar-nav li a').on('click',function() { var parent = $(this).parent().parent();//获取当前页签的父级的父级 var labeul =$(this).parent("li").find(">ul") if ($(this).parent().hasClass('open') == false) { //展开未展开 parent.find('ul').slideUp(300); parent.find("li").removeClass("open") parent.find('li a').removeClass("active").find(".arrow").removeClass("open") $(this).parent("li").addClass("open").find(labeul).slideDown(300); $(this).addClass("active").find(".arrow").addClass("open") }else { $(this).parent("li").removeClass("open").find(labeul).slideUp(300); if($(this).parent().find("ul").length>0) { $(this).removeClass("active").find(".arrow").removeClass("open") }else{ $(this).addClass("active") } } }); }); </script> </body> </html> ```