菜单支持多级

直接上代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8.     <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
  9.     <style>
  10.         ul,li{margin:0;padding:0}
  11.         li{list-style: none}
  12.         #uu{
  13.             width:300px;
  14.             border:1px solid #ddd;
  15.             background-color:rgb(0, 39, 67);
  16.             color:white
  17.         }
  18.         #uu>li+li{
  19.             border-top:1px solid #ddd;
  20.         }
  21.         .box-head{
  22.             box-sizing: border-box;
  23.             display:inline-block;
  24.             width:100%;
  25.             height:40px;
  26.             line-height:40px;
  27.             border:1px solid #ddd;
  28.             padding-left:5px;
  29.             cursor:pointer;
  30.         }
  31.         .child-ul>li>.box-head{
  32.             /* padding-left:20px; */
  33.         }
  34.         .box-head1{
  35.             /* padding-left:35px !important; */
  36.         }
  37.         /* -默认都不显示 */
  38.         .child-ul>li{display:none}
  39.     </style>
  40. </head>
  41. <body>
  42.     <ul id="uu">
  43.         <li>
  44.             <span class="box-head">首页</span>
  45.             <ul class="child-ul">
  46.                 <li>
  47.                     <span class="box-head">区域总览</span>
  48.                 </li>
  49.                 <li><span class="box-head">支路用能概况</span></li>
  50.                 <li><span class="box-head">线路台区分析</span></li>
  51.                 <li><span class="box-head">报表查看</span></li>
  52.             </ul>
  53.         </li>
  54.         <li>
  55.             <span class="box-head">权限管理</span>
  56.             <ul class="child-ul">
  57.                 <li><span class="box-head">操作管理</span></li>
  58.                 <li><span class="box-head">页面管理</span></li>
  59.                 <li><span class="box-head">按钮管理</span></li>
  60.                 <li><span class="box-head">配置管理</span></li>
  61.             </ul></li>
  62.         <li><span class="box-head">系统管理</span></li>
  63.         <li><span class="box-head">菜单管理</span></li>
  64.     </ul>
  65.     <script>
  66.         $(function(){
  67.             $("#uu").on("click",".box-head",function(){
  68.                 debugger;
  69.                 $(this).next().children().slideToggle();
  70.                 $(this).parent().nextAll().find("li").slideUp();
  71.                 $(this).parent().prevAll().find("li").slideUp();
  72.             })
  73.             initUl();
  74.         })
  75.     var json=[{"defaultIconLocation":"/modules/common/images/menuIcon/index.png","isLast":"2","isUsed":"1","mEMO":"a","menuAddr":"javascript:void(0)","menuId":156,"menuIndex":1,"menuLevel":"1","menuName":"首页","menuNameEn":"index","menuState":"0","menuType":"1","pMenuList":[{"defaultIconLocation":"/modules/common/images/menuIcon/empty.png","isLast":"1","isUsed":"1","mEMO":"","menuAddr":"/spring-security-menu/sys/UseEnergyAnalysisController/toDemo3","menuId":323,"menuIndex":1,"menuLevel":"2","menuName":"区域总览","menuNameEn":"","menuState":"0","menuType":"1","pMenuList":[],"parentMenuId":156,"selectIconLocation":""},{"defaultIconLocation":"/modules/common/images/menuIcon/empty.png","isLast":"1","isUsed":"1","mEMO":"","menuAddr":"/spring-security-menu/sys/UseEnergyAnalysisController/toDemo1","menuId":321,"menuIndex":2,"menuLevel":"2","menuName":"支路用能概况","menuNameEn":"","menuState":"0","menuType":"1","pMenuList":[],"parentMenuId":156,"selectIconLocation":""},{"defaultIconLocation":"/modules/common/images/menuIcon/empty.png","isLast":"1","isUsed":"1","mEMO":"","menuAddr":"/spring-security-menu/line_station_area_analysis","menuId":405,"menuIndex":3,"menuLevel":"2","menuName":"线路台区分析","menuNameEn":"line_station_area_analysis","menuState":"0","menuType":"1","pMenuList":[],"parentMenuId":156,"selectIconLocation":""},{"defaultIconLocation":"/modules/common/images/menuIcon/empty.png","isLast":"1","isUsed":"1","mEMO":"","menuAddr":"/spring-security-menu/dataReportSystem_view","menuId":392,"menuIndex":4,"menuLevel":"2","menuName":"报表查看","menuNameEn":"dataReportSystem_view","menuState":"0","menuType":"1","pMenuList":[],"parentMenuId":156,"selectIconLocation":""},{"defaultIconLocation":"/modules/common/images/menuIcon/empty.png","isLast":"1","isUsed":"1","mEMO":"","menuAddr":"/spring-security-menu/makepage/Html_brower1","menuId":394,"menuIndex":5,"menuLevel":"2","menuName":"BI浏览","menuNameEn":"makepage/Html_brower1","menuState":"0","menuType":"1","pMenuList":[],"parentMenuId":156,"selectIconLocation":""},{"defaultIconLocation":"/modules/common/images/menuIcon/empty.png","isLast":"1","isUsed":"1","mEMO":"","menuAddr":"/spring-security-menu/maker/browser1","menuId":393,"menuIndex":6,"menuLevel":"2","menuName":"组态浏览","menuNameEn":"maker/browser1","menuState":"0","menuType":"1","pMenuList":[],"parentMenuId":156,"selectIconLocation":""},{"defaultIconLocation":"/modules/common/images/menuIcon/empty.png","isLast":"1","isUsed":"1","mEMO":"","menuAddr":"/spring-security-menu/index","menuId":411,"menuIndex":7,"menuLevel":"2","menuName":"首页","menuNameEn":"index","menuState":"0","menuType":"1","pMenuList":[],"parentMenuId":156,"selectIconLocation":"es/common/images/menuIcon/emptyChecked.png"},{"defaultIconLocation":"/modules/common/images/menuIcon/index.png","isLast":"1","isUsed":"1","mEMO":"","menuAddr":"/spring-security-menu/dashboard","menuId":410,"menuIndex":8,"menuLevel":"2","menuName":"首页大屏","menuNameEn":"dashboard","menuState":"1","menuType":"1","pMenuList":[],"parentMenuId":156,"selectIconLocation":"es/common/images/menuIcon/indexChecked.png"},{"defaultIconLocation":"/modules/common/images/menuIcon/index.png","isLast":"1","isUsed":"1","mEMO":"","menuAddr":"/spring-security-menu/bim","menuId":412,"menuIndex":9,"menuLevel":"2","menuName":"BIM","menuNameEn":"","menuState":"1","menuType":"1","pMenuList":[],"parentMenuId":156,"selectIconLocation":"common/images/menuIcon/indexChecked.png"}],"parentMenuId":0,"selectIconLocation":"/modules/common/images/menuIcon/indexChecked.png"},{"defaultIconLocation":"/modules/common/images/menuIcon/analyze.png","isLast":"2","isUsed":"1","mEMO":"","menuAddr":"javascript:void(0)","menuId":178,"menuIndex":3,"menuLevel":"1","menuName":"用能分析","menuNameEn":"Statistics","menuNo":"","menuState":"0","menuType":"1","pMenuList":[{"defaultIconLocation":"/modules/common/images/menuIcon/empty.png","isLast":"1","isUsed":"1","mEMO":"","menuAddr":"/spring-security-menu/energy/energyStatistics/toMain","menuId":180,"menuIndex":1,"menuLevel":"2","menuName":"能耗统计","menuNameEn":"User alarm setting","menuNo":"","menuState":"0","menuType":"1","pMenuList":[],"parentMenuId":178,"selectIconLocation":""},{"defaultIconLocation":"/modules/common/images/menuIcon/empty.png","isLast":"1","isUsed":"1","mEMO":"","menuAddr":"/spring-security-menu/energy/energyStatistics/energyCompare","menuId":181,"menuIndex":2,"menuLevel":"2","menuName":"能耗对比","menuNameEn":"User alarm setting","menuNo":"","menuState":"0","menuType":"1","pMenuList":[],"parentMenuId":178,"selectIconLocation":""},{"defaultIconLocation":"/modules/common/images/menuIcon/empty.png","isLast":"1","isUsed":"1","mEMO":"","menuAddr":"/spring-security-menu/curve_analysis","menuId":406,"menuIndex":3,"menuLevel":"2","menuName":"曲线分析","menuNameEn":"curve_analysis","menuState":"0","menuType":"1","pMenuList":[],"parentMenuId":178,"selectIconLocation":""},{"defaultIconLocation":"/modules/common/images/menuIcon/empty.png","isLast":"1","isUsed":"1","mEMO":"","menuAddr":"/spring-security-menu/energy/energyStatistics/energyRanking","menuId":182,"menuIndex":4,"menuLevel":"2","menuName":"账单分析","menuNameEn":"User alarm setting","menuNo":"","menuState":"0","menuType":"1","pMenuList":[],"parentMenuId":178,"selectIconLocation":""},{"defaultIconLocation":"/modules/common/images/menuIcon/empty.png","isLast":"1","isUsed":"1","mEMO":"","menuAddr":"/spring-security-menu/energy/energyStatistics/demandAnalysis","menuId":184,"menuIndex":11,"menuLevel":"2","menuName":"峰平谷负荷分析","menuNameEn":"Economy Energy Analysis","menuNo":"","menuState":"0","menuType":"1","pMenuList":[],"parentMenuId":178,"selectIconLocation":""},{"defaultIconLocation":"/modules/common/images/menuIcon/empty.png","isLast":"1","isUsed":"1","mEMO":"","menuAddr":"/spring-security-menu/equip/ullageAnalysis/toMain","menuId":258,"menuIndex":22,"menuLevel":"2","menuName":"需量分析","menuNameEn":"ullage Analysis","menuState":"0","menuType":"1","pMenuList":[],"parentMenuId":178,"selectIconLocation":""},{"defaultIconLocation":"/modules/common/images/menuIcon/empty.png","isLast":"1","isUsed":"1","mEMO":"","menuAddr":"/spring-security-menu/sys/RecurrenceController/totoLost","menuId":353,"menuIndex":27,"menuLevel":"2","menuName":"漏损分析","menuNameEn":"","menuState":"0","menuType":"1","pMenuList":[],"parentMenuId":178,"selectIconLocation":""}],"parentMenuId":0,"selectIconLocation":"dules/common/images/menuIcon/analyzeChecked.png"},{"defaultIconLocation":"/modules/common/images/menuIcon/system.png","isLast":"2","isUsed":"1","mEMO":"","menuAddr":"javascript:void(0)","menuId":348,"menuIndex":5,"menuLevel":"1","menuName":"预测分析","menuNameEn":"","menuState":"0","menuType":"1","pMenuList":[{"defaultIconLocation":"/modules/common/images/menuIcon/empty.png","isLast":"1","isUsed":"1","mEMO":"","menuAddr":"/spring-security-menu/energyConRep/toHourlyReport","menuId":351,"menuIndex":3,"menuLevel":"2","menuName":"数据预分析","menuNameEn":"","menuState":"0","menuType":"1","pMenuList":[],"parentMenuId":348,"selectIconLocation":""},{"defaultIconLocation":"/modules/common/images/menuIcon/empty.png","isLast":"1","isUsed":"1","mEMO":"","menuAddr":"/spring-security-menu/sys/RecurrenceController/toForcast","menuId":352,"menuIndex":4,"menuLevel":"2","menuName":"电量预测","menuNameEn":"electric","menuState":"0","menuType":"1","pMenuList":[],"parentMenuId":348,"selectIconLocation":""},{"defaultIconLocation":"/modules/common/images/menuIcon/empty.png","isLast":"1","isUsed":"1","mEMO":"","menuAddr":"/spring-security-menu/sys/RecurrenceController/toGlForcast","menuId":403,"menuIndex":5,"menuLevel":"2","menuName":"负荷预测","menuNameEn":"forcast","menuState":"0","menuType":"1","pMenuList":[],"parentMenuId":348,"selectIconLocation":""}],"parentMenuId":0,"selectIconLocation":"es/common/images/menuIcon/systemChecked.png"},{"defaultIconLocation":"/modules/common/images/menuIcon/tool.png","isLast":"2","isUsed":"1","mEMO":"","menuAddr":"javascript:void(0)","menuId":204,"menuIndex":6,"menuLevel":"1","menuName":"运维管理","menuNameEn":"EquipManage","menuNo":"","menuState":"0","menuType":"1","pMenuList":[{"defaultIconLocation":"/modules/common/images/menuIcon/empty.png","isLast":"1","isUsed":"1","mEMO":"","menuAddr":"/spring-security-menu/equip/olEquipmentAnalysis/toCommunication","menuId":206,"menuIndex":3,"menuLevel":"2","menuName":"设备台账","menuNameEn":"On line eqiupment analysis","menuNo":"","menuState":"0","menuType":"1","pMenuList":[],"parentMenuId":204,"selectIconLocation":""},{"defaultIconLocation":"/modules/common/images/menuIcon/empty.png","isLast":"1","isUsed":"1","mEMO":"","menuAddr":"/spring-security-menu/busin/deviceTree/toSubitem","menuId":261,"menuIndex":13,"menuLevel":"2","menuName":"分类分项","menuNameEn":"subitem","menuState":"0","menuType":"1","pMenuList":[],"parentMenuId":204,"selectIconLocation":""},{"defaultIconLocation":"/modules/common/images/menuIcon/empty.png","isLast":"1","isUsed":"1","mEMO":"","menuAddr":"/spring-security-menu/sys/AcppController/toMain","menuId":326,"menuIndex":15,"menuLevel":"2","menuName":"运维计划","menuNameEn":"Maintenance Plan Set","menuState":"0","menuType":"1","pMenuList":[],"parentMenuId":204,"selectIconLocation":""},{"defaultIconLocation":"/modules/common/images/menuIcon/empty.png","isLast":"1","isUsed":"1","mEMO":"","menuAddr":"/spring-security-menu/equip/toInspection","menuId":407,"menuIndex":17,"menuLevel":"2","menuName":"运维记录","menuNameEn":"xujianjilu","menuState":"0","menuType":"1","pMenuList":[],"parentMenuId":204,"selectIconLocation":""}],"parentMenuId":0,"selectIconLocation":"common/images/menuIcon/toolChecked.png"},{"defaultIconLocation":"/modules/common/images/menuIcon/alarm.png","isLast":"2","isUsed":"1","mEMO":"","menuAddr":"javascript:void(0)","menuId":55,"menuIndex":7,"menuLevel":"1","menuName":"告警管理","menuNameEn":"AlarmManage","menuNo":"","menuState":"0","menuType":"1","pMenuList":[{"defaultIconLocation":"/modules/common/images/menuIcon/empty.png","isLast":"1","isUsed":"1","mEMO":"","menuAddr":"/spring-security-menu/sys/alarmEventHandle/toMain","menuId":241,"menuIndex":5,"menuLevel":"2","menuName":"历史事件查找","menuNameEn":"alarmEventHandle","menuState":"0","menuType":"1","pMenuList":[],"parentMenuId":55,"selectIconLocation":""},{"defaultIconLocation":"/modules/common/images/menuIcon/empty.png","isLast":"1","isUsed":"1","mEMO":"告警配置 报警事项句配置","menuAddr":"/spring-security-menu/historical_event","menuId":401,"menuIndex":6,"menuLevel":"2","menuName":"报警事项句","menuNameEn":"historical_event","menuState":"0","menuType":"1","pMenuList":[],"parentMenuId":55,"selectIconLocation":""}],"parentMenuId":0,"selectIconLocation":"/modules/common/images/menuIcon/alarmChecked.png"},{"defaultIconLocation":"/modules/common/images/menuIcon/monitor.png","isLast":"2","isUsed":"1","mEMO":"","menuAddr":"javascript:void(0)","menuId":21,"menuIndex":9,"menuLevel":"1","menuName":"售电管理","menuNameEn":"Account","menuNo":"","menuState":"0","menuType":"1","pMenuList":[{"defaultIconLocation":"/modules/common/images/menuIcon/empty.png","isLast":"1","isUsed":"1","mEMO":"售电系统","menuAddr":"/spring-security-menu/shoudian","menuId":388,"menuIndex":1,"menuLevel":"2","menuName":"售电系统","menuNameEn":"shoudian","menuState":"1","menuType":"1","pMenuList":[],"parentMenuId":21,"selectIconLocation":""}],"parentMenuId":0,"selectIconLocation":"es/common/images/menuIcon/monitorChecked.png"},{"defaultIconLocation":"/modules/common/images/menuIcon/user.png","isLast":"2","isUsed":"1","mEMO":"","menuAddr":"javascript:void(0)","menuId":387,"menuIndex":10,"menuLevel":"1","menuName":"采集管理","menuNameEn":"caiji","menuState":"0","menuType":"1","pMenuList":[{"defaultIconLocation":"/modules/common/images/menuIcon/empty.png","isLast":"1","isUsed":"1","mEMO":"","menuAddr":"/spring-security-menu/sys/DeviceManagerAll/toMeteringList","menuId":254,"menuIndex":1,"menuLevel":"2","menuName":"设备模型配置","menuNameEn":"Device Model Set","menuState":"0","menuType":"1","pMenuList":[],"parentMenuId":387,"selectIconLocation":""},{"defaultIconLocation":"/modules/common/images/menuIcon/empty.png","isLast":"1","isUsed":"1","mEMO":"","menuAddr":"/spring-security-menu/sys/ImportDataController/toMain?type=1","menuId":257,"menuIndex":2,"menuLevel":"2","menuName":"数据录入","menuNameEn":"store energy by hands","menuState":"0","menuType":"1","pMenuList":[],"parentMenuId":387,"selectIconLocation":""},{"defaultIconLocation":"/modules/common/images/menuIcon/empty.png","isLast":"1","isUsed":"1","mEMO":"","menuAddr":"/spring-security-menu/sys/CollectionManagerController/toParam","menuId":253,"menuIndex":3,"menuLevel":"2","menuName":"采集管理","menuNameEn":"Collection Manager","menuState":"0","menuType":"1","pMenuList":[],"parentMenuId":387,"selectIconLocation":""},{"defaultIconLocation":"/modules/common/images/menuIcon/empty.png","isLast":"1","isUsed":"1","mEMO":"","menuAddr":"/spring-security-menu/sys/UseEnergyAnalysisController/toParamSet","menuId":320,"menuIndex":4,"menuLevel":"2","menuName":"用能参数单位配置","menuNameEn":"UseEnergy UnitCode Set","menuState":"0","menuType":"1","pMenuList":[],"parentMenuId":387,"selectIconLocation":""},{"defaultIconLocation":"/modules/common/images/menuIcon/empty.png","isLast":"1","isUsed":"1","mEMO":"","menuAddr":"/spring-security-menu/realTimeData/toPointData","menuId":378,"menuIndex":5,"menuLevel":"2","menuName":"实时数据","menuNameEn":"","menuState":"0","menuType":"1","pMenuList":[],"parentMenuId":387,"selectIconLocation":""},{"defaultIconLocation":"/modules/common/images/menuIcon/empty.png","isLast":"1","isUsed":"1","mEMO":"日冻结数据补抄","menuAddr":"/spring-security-menu/replication_of_daily_frozen_data","menuId":402,"menuIndex":6,"menuLevel":"2","menuName":"日冻结数据补抄","menuNameEn":"replication_of_daily_frozen_data","menuState":"0","menuType":"1","pMenuList":[],"parentMenuId":387,"selectIconLocation":""},{"defaultIconLocation":"/modules/common/images/menuIcon/empty.png","isLast":"1","isUsed":"2","mEMO":"influxDb查询明细数据","menuAddr":"/spring-security-menu/influxDb_data_html","menuId":391,"menuIndex":31,"menuLevel":"2","menuName":"influxDb查询明细数据","menuNameEn":"influxDb_data_html","menuState":"0","menuType":"1","pMenuList":[],"parentMenuId":387,"selectIconLocation":""}],"parentMenuId":0,"selectIconLocation":"/modules/common/images/menuIcon/userChecked.png"},{"defaultIconLocation":"/modules/common/images/menuIcon/user.png","isLast":"1","isUsed":"1","mEMO":"","menuAddr":"sys/menu/toMain","menuId":1,"menuIndex":11,"menuLevel":"1","menuName":"系统管理","menuNameEn":"System","menuNo":"","menuState":"0","menuType":"1","pMenuList":[{"defaultIconLocation":"/modules/common/images/menuIcon/empty.png","isLast":"1","isUsed":"1","mEMO":"","menuAddr":"/spring-security-menu/sys/companyInfo/toMain","menuId":20,"menuIndex":9,"menuLevel":"2","menuName":"企业配置","menuNameEn":"Region management","menuNo":"","menuState":"0","menuType":"1","pMenuList":[],"parentMenuId":1,"selectIconLocation":""},{"defaultIconLocation":"/modules/common/images/menuIcon/empty.png","isLast":"1","isUsed":"1","mEMO":"","menuAddr":"/spring-security-menu/sys/user/toMain","menuId":16,"menuIndex":10,"menuLevel":"2","menuName":"用户管理","menuNameEn":"User management","menuNo":"","menuState":"0","menuType":"1","pMenuList":[],"parentMenuId":1,"selectIconLocation":""},{"defaultIconLocation":"/modules/common/images/menuIcon/empty.png","isLast":"2","isUsed":"1","mEMO":"","menuAddr":"/spring-security-menu/sys/role/toMain","menuId":13,"menuIndex":11,"menuLevel":"2","menuName":"角色管理","menuNameEn":"Role management","menuNo":"","menuState":"0","menuType":"1","pMenuList":[],"parentMenuId":1,"selectIconLocation":""},{"defaultIconLocation":"/modules/common/images/menuIcon/empty.png","isLast":"1","isUsed":"1","mEMO":"","menuAddr":"/spring-security-menu/sys/roleAssign/toMain","menuId":15,"menuIndex":13,"menuLevel":"2","menuName":"权限管理","menuNameEn":"Permission management","menuNo":"","menuState":"0","menuType":"1","pMenuList":[],"parentMenuId":1,"selectIconLocation":""},{"defaultIconLocation":"/modules/common/images/menuIcon/empty.png","isLast":"1","isUsed":"1","mEMO":"","menuAddr":"/spring-security-menu/sys/log/toLoginLog","menuId":63,"menuIndex":14,"menuLevel":"2","menuName":"日志管理","menuNameEn":"Log management","menuNo":"","menuState":"0","menuType":"1","pMenuList":[],"parentMenuId":1,"selectIconLocation":""}],"parentMenuId":0,"selectIconLocation":"/modules/common/images/menuIcon/userChecked.png"},{"defaultIconLocation":"/modules/common/images/menuIcon/plat.png","isLast":"2","isUsed":"1","mEMO":"","menuAddr":"javascript:void(0)","menuId":92,"menuIndex":12,"menuLevel":"1","menuName":"平台管理","menuNameEn":"Platform","menuNo":"","menuState":"0","menuType":"1","pMenuList":[{"defaultIconLocation":"/modules/common/images/menuIcon/empty.png","isLast":"1","isUsed":"1","mEMO":"0","menuAddr":"/spring-security-menu/sys/dict/toMain","menuId":24,"menuIndex":3,"menuLevel":"2","menuName":"数据字典","menuNameEn":"Data dictionary","menuNo":"","menuState":"0","menuType":"1","pMenuList":[],"parentMenuId":92,"selectIconLocation":""},{"defaultIconLocation":"/modules/common/images/menuIcon/system.png","isLast":"2","isUsed":"1","mEMO":"","menuAddr":"/spring-security-menu/sys/menu/toMain","menuId":2,"menuIndex":5,"menuLevel":"2","menuName":"菜单管理","menuNameEn":"Menu management","menuNo":"","menuState":"0","menuType":"1","pMenuList":[],"parentMenuId":92,"selectIconLocation":"/modules/common/images/menuIcon/systemChecked.png"},{"defaultIconLocation":"/modules/common/images/menuIcon/empty.png","isLast":"1","isUsed":"1","mEMO":"","menuAddr":"/spring-security-menu/sys/dataReportSystem","menuId":222,"menuIndex":6,"menuLevel":"2","menuName":"报表设计","menuNameEn":"Report Design","menuState":"0","menuType":"1","pMenuList":[],"parentMenuId":92,"selectIconLocation":""},{"defaultIconLocation":"/modules/common/images/menuIcon/empty.png","isLast":"1","isUsed":"1","mEMO":"页面制定","menuAddr":"/spring-security-menu/makepage/Html_config","menuId":239,"menuIndex":12,"menuLevel":"2","menuName":"BI设计","menuNameEn":"designPage","menuState":"0","menuType":"1","pMenuList":[],"parentMenuId":92,"selectIconLocation":""},{"defaultIconLocation":"/modules/common/images/menuIcon/empty.png","isLast":"1","isUsed":"1","mEMO":"","menuAddr":"/spring-security-menu/maker/config","menuId":267,"menuIndex":17,"menuLevel":"2","menuName":"组态编辑","menuNameEn":"Maker","menuState":"0","menuType":"1","pMenuList":[],"parentMenuId":92,"selectIconLocation":""},{"defaultIconLocation":"/modules/common/images/menuIcon/empty.png","isLast":"1","isUsed":"1","mEMO":"0","menuAddr":"/spring-security-menu/sys/sysPara/toMain","menuId":27,"menuIndex":28,"menuLevel":"2","menuName":"系统参数","menuNameEn":"System parameter","menuNo":"","menuState":"0","menuType":"1","pMenuList":[],"parentMenuId":92,"selectIconLocation":""},{"defaultIconLocation":"/modules/common/images/menuIcon/empty.png","isLast":"1","isUsed":"1","mEMO":"漏损分析配置","menuAddr":"/spring-security-menu/leakage_analysis_configuer","menuId":400,"menuIndex":33,"menuLevel":"2","menuName":"漏损分析配置","menuNameEn":"leakage_analysis_configuer","menuState":"0","menuType":"1","pMenuList":[],"parentMenuId":92,"selectIconLocation":""},{"defaultIconLocation":"/modules/common/images/menuIcon/empty.png","isLast":"1","isUsed":"1","mEMO":"","menuAddr":"/spring-security-menu/query_table_bottom_values","menuId":408,"menuIndex":34,"menuLevel":"2","menuName":"表底值查询","menuNameEn":"","menuState":"0","menuType":"1","pMenuList":[],"parentMenuId":92,"selectIconLocation":""}],"parentMenuId":0,"selectIconLocation":"/modules/common/images/menuIcon/platChecked.png"},{"defaultIconLocation":"/modules/common/images/menuIcon/user.png","isLast":"1","isUsed":"1","mEMO":"","menuAddr":"/app","menuId":379,"menuIndex":13,"menuLevel":"1","menuName":"APP管理","menuNameEn":"fsd","menuState":"0","menuType":"1","pMenuList":[{"defaultIconLocation":"/modules/common/images/menuIcon/report.png","isLast":"1","isUsed":"1","mEMO":"","menuAddr":"/spring-security-menu/app/sys/AppManageController/toMain","menuId":386,"menuIndex":2,"menuLevel":"2","menuName":"APP管理","menuNameEn":"","menuState":"0","menuType":"1","pMenuList":[],"parentMenuId":379,"selectIconLocation":"/modules/common/images/menuIcon/reportChecked.png"}],"parentMenuId":0,"selectIconLocation":"/modules/common/images/menuIcon/userChecked.png"}]
  76.         //测试是否支持3级的菜单，结论是支持
  77.         json[0]['pMenuList'][0].pMenuList.push({"menuName": "APP管理","menuLevel":3});
  78.         json[0]['pMenuList'][0].pMenuList.push({"menuName": "APP管理1","menuLevel":3});
  79.     function initUl(){
  80.         //使用递归构建str
  81.         var menuStr='<ul id="uu">'
  82.         for(var i=0;i<json.length;i++){
  83.             var n=json[i];
  84.             menuStr+='<li>'+
  85.                         '<span class="box-head">'+n.menuName+'</span>';
  86.             if(n.pMenuList && n.pMenuList.length){
  87.                 var arr=n.pMenuList;
  88.                 getbutnodes(arr);
  89.             }else{
  90.                 menuStr+='</li>';
  91.             }
  92.         }
  93.         menuStr+="</ul>" ;
  94.         $("#uu").html(menuStr);
  95.         function getbutnodes(_arr){
  96.             if(_arr.length==0){return}
  97.             menuStr+='<ul class="child-ul">';
  98.             //获取当前是多少级的菜单
  99.             var level=_arr[0].menuLevel || 1;
  100.             console.log(level);
  101.             var nbsp=new Array(Math.ceil(level) ).join("&emsp;");
  102.             for(var j=0;j<_arr.length;j++){
  103.                 var _a=_arr[j];
  104.                 menuStr+='<li>'+
  105.                         '<span class="box-head">'+nbsp+level+_a.menuName+'</span>';
  106.                 if(_a.pMenuList instanceof Array){
  107.                     getbutnodes(_a.pMenuList)
  108.                 }
  109.             }
  110.             menuStr+='</ul>';
  111.         }
  112.     }
  113.  
  114.     </script>
  115.  
  116. </body>
  117. </html>

效果图

jQuery 手写菜单（ing）的更多相关文章

  1. jQuery手写几个常见的滑动下拉菜单 分分秒秒学习JS

    一般的企业网站再我们再实际工作中,有些特效,用jQuery来做,显得极其简单,除非一些大的公司,需要封装自己的类. 今天,我们讲解jQuery入门知识,来写几个简单jQuery滑动下拉菜单.感受一下j ...

  2. jquery手写焦点轮播图-------解决最后一张无缝跳转第一张的问题

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. js+jquery手写弹出提示框

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  4. jquery 手写一个简单浮窗的反面教材

    前言 初学jquery写的代码,陈年往事回忆一下. 正文 介绍一下大体思路 思路: 1.需要控制一块区域,这块区域一开始是隐藏的. 2.这个区域需要关闭按钮,同时我需要写绑定事件,关闭的时候让这块区域 ...

  5. jquery手写实现单页滚动导航

    效果说明:点击tab导航,页面滑动到下方相应板块.并且当页面通过鼠标滚动下去时,上方的tab也可以自动切换到当前位置的板块上. 代码说明:js中对两个动作分别写,一个是tab点击下滑到相应板块位置:一 ...

  6. JQuery手写一个简单的分页

    效果图: 大概思路:使用ul进行初始布局,每一次点击事件改变li里的值.完整的代码在gitup上:https://github.com/anxizhihai/Paging.gitcss部分: html ...

  7. JQuery手写一个简单的轮播图

    做出来的样式: 没有切图,就随便找了一些图片来实现效果,那几个小星星萌不萌. 这个轮播图最主要的部分是animate(),可以先熟悉下这个方法. 代码我放到了github上,链接:https://gi ...

  8. 一个常见下拉菜单的样式：一体化小三角（纯css手写解决）

    类似下拉菜单2个一体化小三角,习惯上用字体图标加jQuery处理,比较方便,但是下面纯css手写解决方式,效果也还不错,对CSS知识也是一个比较好的孔固. 小三角用了2种不同处理方式:1.利用bord ...

  9. 待实践二：MVC3下的3种验证 (1)前台 jquery validate验证 (2)MVC实体验证 (3)EF生成的/自己手写的 自定义实体校验(伙伴类+元素据共享)

    MVC3下的3种验证 (1):前台Jquery Validate脚本验证 引入脚本 <script src="../js/jquery.js" type="text ...

随机推荐

  1. CloudFlare 新手入门中文教程

    loudFlare成立于2009年,是国外著名的免费CDN网站加速服务公司,CloudFlare 还提供实时安全保护服务和网络优化等,采用的是免费+增值模式,可以免费使用,也有收费服务.国内也有很多免 ...

  2. 以太坊Geth通过私钥导入新地址到钱包步骤（3种方法）

    一: 通过Geth客户端导入私钥: Open TextEdit Paste key into TextEdit without any extra characters or quotations S ...

  3. mySQL 插入,更新和删除数据

    插入数据: 语法: INSERT INTO table_name ( field1, field2,...fieldN ) VALUES ( value1, value2,...valueN ); 如 ...

  4. cls只能调用一次实例 第二次None

    class Zarten(): _singleton = None def __new__(cls, *args, **kwargs): print('__new__') if not cls._si ...

  5. Failed to execute goal org.apache.maven.plugins:maven-surefire-plugin:2.5:test

    解决方法: 打包跳过测试有两种方法 一是命令行 mvn clean package -Dmaven.test.skip=true 二是写入pom文件 <plugin> <groupI ...

  6. NuGet修改packages目录/迁移缓存文件夹

    如图,以下是NuGet默认配置 打开C:\Program Files (x86)\NuGet\Config目录的Microsoft.VisualStudio.Offline.config可以看见如下配 ...

  7. L1、L2正则化详解

    正则化是一种回归的形式,它将系数估计(coefficient estimate)朝零的方向进行约束.调整或缩小.也就是说,正则化可以在学习过程中降低模型复杂度和不稳定程度,从而避免过拟合的危险. 一. ...

  8. （IStool）软件打包时当文件存在时不覆盖文件（配置文件）

    需求:程序实际使用过程中有些配置信息是需要用户手动配置的,不同客户使用配置信息也不同,所以软件发布前需要考虑这个问题,覆盖安装时需要忽略这些配置文件 实现:当对应的目录下由此文件的时候不覆盖此文件 [ ...

  9. container_of宏

    title: container_of宏 date: 2019/7/24 15:49:26 toc: true --- container_of宏 解析 在linux链表结构中有这样一个宏,通过成员变 ...

  10. 创建多个Fragment可滑动界面

    创建新项目,选择Tabbed Activity 默认就有2个Fragment,这里我们删除相关代码. 在切换时 FragmentPagerAdapter onDestroyView onCreateV ...