jQuery 手写菜单（ing）
菜单支持多级
直接上代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
<style>
ul,li{margin:0;padding:0}
li{list-style: none}
#uu{
width:300px;
border:1px solid #ddd;
background-color:rgb(0, 39, 67);
color:white
}
#uu>li+li{
border-top:1px solid #ddd;
}
.box-head{
box-sizing: border-box;
display:inline-block;
width:100%;
height:40px;
line-height:40px;
border:1px solid #ddd;
padding-left:5px;
cursor:pointer;
}
.child-ul>li>.box-head{
/* padding-left:20px; */
}
.box-head1{
/* padding-left:35px !important; */
}
/* -默认都不显示 */
.child-ul>li{display:none}
</style>
</head>
<body>
<ul id="uu">
<li>
<span class="box-head">首页</span>
<ul class="child-ul">
<li>
<span class="box-head">区域总览</span>
</li>
<li><span class="box-head">支路用能概况</span></li>
<li><span class="box-head">线路台区分析</span></li>
<li><span class="box-head">报表查看</span></li>
</ul>
</li>
<li>
<span class="box-head">权限管理</span>
<ul class="child-ul">
<li><span class="box-head">操作管理</span></li>
<li><span class="box-head">页面管理</span></li>
<li><span class="box-head">按钮管理</span></li>
<li><span class="box-head">配置管理</span></li>
</ul></li>
<li><span class="box-head">系统管理</span></li>
<li><span class="box-head">菜单管理</span></li>
</ul>
<script>
$(function(){
$("#uu").on("click",".box-head",function(){
debugger;
$(this).next().children().slideToggle();
$(this).parent().nextAll().find("li").slideUp();
$(this).parent().prevAll().find("li").slideUp();
})
initUl();
})
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"}]
//测试是否支持3级的菜单，结论是支持
json[0]['pMenuList'][0].pMenuList.push({"menuName": "APP管理","menuLevel":3});
json[0]['pMenuList'][0].pMenuList.push({"menuName": "APP管理1","menuLevel":3});
function initUl(){
//使用递归构建str
var menuStr='<ul id="uu">'
for(var i=0;i<json.length;i++){
var n=json[i];
menuStr+='<li>'+
'<span class="box-head">'+n.menuName+'</span>';
if(n.pMenuList && n.pMenuList.length){
var arr=n.pMenuList;
getbutnodes(arr);
}else{
menuStr+='</li>';
}
}
menuStr+="</ul>" ;
$("#uu").html(menuStr);
function getbutnodes(_arr){
if(_arr.length==0){return}
menuStr+='<ul class="child-ul">';
//获取当前是多少级的菜单
var level=_arr[0].menuLevel || 1;
console.log(level);
var nbsp=new Array(Math.ceil(level) ).join(" ");
for(var j=0;j<_arr.length;j++){
var _a=_arr[j];
menuStr+='<li>'+
'<span class="box-head">'+nbsp+level+_a.menuName+'</span>';
if(_a.pMenuList instanceof Array){
getbutnodes(_a.pMenuList)
}
}
menuStr+='</ul>';
}
}
</script>
</body>
</html>
效果图
