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>
效果图
jQuery 手写菜单（ing）的更多相关文章
- jQuery手写几个常见的滑动下拉菜单 分分秒秒学习JS
一般的企业网站再我们再实际工作中,有些特效,用jQuery来做,显得极其简单,除非一些大的公司,需要封装自己的类. 今天,我们讲解jQuery入门知识,来写几个简单jQuery滑动下拉菜单.感受一下j ...
- jquery手写焦点轮播图-------解决最后一张无缝跳转第一张的问题
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- js+jquery手写弹出提示框
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- jquery 手写一个简单浮窗的反面教材
前言 初学jquery写的代码,陈年往事回忆一下. 正文 介绍一下大体思路 思路: 1.需要控制一块区域,这块区域一开始是隐藏的. 2.这个区域需要关闭按钮,同时我需要写绑定事件,关闭的时候让这块区域 ...
- jquery手写实现单页滚动导航
效果说明:点击tab导航,页面滑动到下方相应板块.并且当页面通过鼠标滚动下去时,上方的tab也可以自动切换到当前位置的板块上. 代码说明:js中对两个动作分别写,一个是tab点击下滑到相应板块位置:一 ...
- JQuery手写一个简单的分页
效果图: 大概思路:使用ul进行初始布局,每一次点击事件改变li里的值.完整的代码在gitup上:https://github.com/anxizhihai/Paging.gitcss部分: html ...
- JQuery手写一个简单的轮播图
做出来的样式: 没有切图,就随便找了一些图片来实现效果,那几个小星星萌不萌. 这个轮播图最主要的部分是animate(),可以先熟悉下这个方法. 代码我放到了github上,链接:https://gi ...
- 一个常见下拉菜单的样式：一体化小三角（纯css手写解决）
类似下拉菜单2个一体化小三角,习惯上用字体图标加jQuery处理,比较方便,但是下面纯css手写解决方式,效果也还不错,对CSS知识也是一个比较好的孔固. 小三角用了2种不同处理方式:1.利用bord ...
- 待实践二：MVC3下的3种验证 (1)前台 jquery validate验证 (2)MVC实体验证 (3)EF生成的/自己手写的 自定义实体校验(伙伴类+元素据共享)
MVC3下的3种验证 (1):前台Jquery Validate脚本验证 引入脚本 <script src="../js/jquery.js" type="text ...
随机推荐
- ViewPager翻页控件简单使用方法
例子布局文件: 主activity布局文件:activity_view_pager.xml <?xml version="1.0" encoding="utf-8& ...
- shell编程（2）
一.变量简介 变量是任何一种编程语言都必不可少的组成部分,变量用来存放各种数据.脚本语言在定义变量时通常不需要指明类型,直接赋值即可,shell变量也遵循这个规则. 在Bash shell 中,每一个 ...
- Flutter 贝塞尔曲线切割
现在人们对于网站的美感要求是越来越高了,所以很多布局需要优美的曲线设计.当然最简单的办法是作一个PNG的透明图片,然后外边放一个Container.但其内容如果本身就不是图片,只是容器,这种放入图片的 ...
- 【编程开发】加密算法(MD5,RSA,DES)的解析
MD5的全称是Message-Digest Algorithm 5,在90年代初由MIT的计算机科学实验室和RSA Data Security Inc发明,经MD2.MD3和MD4发展而来. MD5将 ...
- Official Program for CVPR 2015
From: http://www.pamitc.org/cvpr15/program.php Official Program for CVPR 2015 Monday, June 8 8:30am ...
- 【VS开发】MP4与H.264
一.MP4格式基本概念 MP4格式对应标准MPEG-4标准(ISO/IEC14496) 二.MP4封装格式核心概念 1 MP4封装格式对应标准为 ISO/IEC 14496-12(信息技术 视听对象 ...
- 最新 央视网java校招面经 （含整理过的面试题大全）
从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易雷火.京东.去哪儿.央视网等10家互联网公司的校招Offer,因为某些自身原因最终选择了央视网.6.7月主要是做系统复习.项目复盘.LeetCo ...
- C#,CLR，IL，JIT概念 以及 .NET 家族
C#,CLR,IL,JIT概念 以及 .NET 家族 Monitor 类通过向单个线程授予对象锁来控制对对象的访问.对象锁提供限制访问代码块(通常称为临界区)的能⼒.当 ⼀个线程拥有对象的锁时,其 ...
- A+B Problem Plus and A-B Problem Plus and A*B Problem Plus
//we have defined the necessary header files here for this problem. //If additional header files are ...
- Goahead 编译
目录 Goahead 目录说明 Ubuntu编译 交叉编译 方便测试 参考 title: Goahead date: 2019/11/6 09:45:01 toc: true --- Goahead ...