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> ```