jQuery多級menu · 前端开发

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:;" > 主页 </a> <ul class="dropdown-menu"> <li><a href="javascript:;">用户管理</a></li> <li > <a href="javascript:;" >个人信息</a> <ul class="dropdown-menu"> <li><a href="javascript:;" >我的个人资料</a></li> <li><a href="javascript:;">我的日历</a></li> </ul> </li> </ul> </li> <li class=""> <a href="javascript:;" >文章管理</a> </li> <li > <a href="javascript:;" > 统计报表 </a> <ul class="dropdown-menu"> <li><a href="javascript:;" >发运表</a></li> <li><a href="javascript:;">发运结算表</a></li> <li > <a href="javascript:;" >打印</a> <ul class="dropdown-menu"> <li><a href="javascript:;" >发运结算表</a></li> <li><a href="javascript:;">应收发运单</a></li> </ul> </li> <li > <a href="javascript:;" >数据查询</a> <ul class="dropdown-menu"> <li><a href="javascript:;" >发运单查询</a></li> <li><a href="javascript:;">自营车查询</a></li> <li > <a href="javascript:;" >报账明细</a> <ul class="dropdown-menu"> <li><a href="javascript:;" >报账明细1</a></li> <li><a href="javascript:;">报账明细1</a></li> <li > <a href="javascript:;" >自营车汇总表</a> <ul class="dropdown-menu"> <li><a href="javascript:;" >自营车汇总表1</a></li> <li><a href="javascript:;">自营车汇总表2</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> ```