jQuery.Easyui 三层菜单的实现
有图才有真相:
三层导航菜单JSON 数据格式如下:

var _menus = {
basic : [ {
"menuid" : "10",
"icon" : "icon-sys",
"menuname" : "基础数据",
"menus" : [ {
"menuid" : "111",
"menuname" : "基础数据1",
"icon" : "icon-nav",
"url" : "#"
}, {
"menuid" : "113",
"menuname" : "基础数据12",
"icon" : "icon-nav",
"url" : "#"
}, {
"menuid" : "115",
"menuname" : "基础数据13",
"icon" : "icon-nav",
"url" : "#"
}, {
"menuid" : "117",
"menuname" : "基础数据14",
"icon" : "icon-nav",
"url" : "#"
}, {
"menuid" : "119",
"menuname" : "基础数据15",
"icon" : "icon-nav",
"url" : "em/enterpriseChannelObtend.action"
} ]
}, {
"menuid" : "20",
"icon" : "icon-sys",
"menuname" : "测试一",
"menus" : [ {
"menuid" : "211",
"menuname" : "测试一11",
"icon" : "icon-nav",
"url" : "#"
}, {
"menuid" : "213",
"menuname" : "测试一22",
"icon" : "icon-nav",
"url" : "#"
} ]
} ],
point : [{
"menuid" : "20",
"icon" : "icon-sys",
"menuname" : "积分管理",
"menus" : [ {
"menuid" : "211",
"menuname" : "积分用途",
"icon" : "icon-nav",
"url" : "#"
}, {
"menuid" : "213",
"menuname" : "积分调整",
"icon" : "icon-nav",
"url" : "#"
} ]
}]
};
basic : [ {
"menuid" : "10",
"icon" : "icon-sys",
"menuname" : "基础数据",
"menus" : [ {
"menuid" : "111",
"menuname" : "基础数据1",
"icon" : "icon-nav",
"url" : "#"
}, {
"menuid" : "113",
"menuname" : "基础数据12",
"icon" : "icon-nav",
"url" : "#"
}, {
"menuid" : "115",
"menuname" : "基础数据13",
"icon" : "icon-nav",
"url" : "#"
}, {
"menuid" : "117",
"menuname" : "基础数据14",
"icon" : "icon-nav",
"url" : "#"
}, {
"menuid" : "119",
"menuname" : "基础数据15",
"icon" : "icon-nav",
"url" : "em/enterpriseChannelObtend.action"
} ]
}, {
"menuid" : "20",
"icon" : "icon-sys",
"menuname" : "测试一",
"menus" : [ {
"menuid" : "211",
"menuname" : "测试一11",
"icon" : "icon-nav",
"url" : "#"
}, {
"menuid" : "213",
"menuname" : "测试一22",
"icon" : "icon-nav",
"url" : "#"
} ]
} ],
point : [{
"menuid" : "20",
"icon" : "icon-sys",
"menuname" : "积分管理",
"menus" : [ {
"menuid" : "211",
"menuname" : "积分用途",
"icon" : "icon-nav",
"url" : "#"
}, {
"menuid" : "213",
"menuname" : "积分调整",
"icon" : "icon-nav",
"url" : "#"
} ]
}]
};
原有动态加载菜单方法有所改变:

//清空
function Clearnav() {
var pp = $('#wnav').accordion('panels');
$.each(pp, function(i, n) {
if (n) {
var t = n.panel('options').title;
$('#wnav').accordion('remove', t);
}
});
pp = $('#wnav').accordion('getSelected');
if (pp) {
var title = pp.panel('options').title;
$('#wnav').accordion('remove', title);
}
}
//增加
function addNav(data) {
$.each(data, function(i, sm) {
var menulist = "";
menulist += '<ul>';
$.each(sm.menus, function(j, o) {
menulist += '<li><div><a ref="' + o.menuid + '" href="#" rel="'
+ o.url + '" ><span class="icon ' + o.icon
+ '" > </span><span class="nav">' + o.menuname
+ '</span></a></div></li> ';
});
menulist += '</ul>';
$('#wnav').accordion('add', {
title : sm.menuname,
content : menulist,
iconCls : 'icon ' + sm.icon
});
});
var pp = $('#wnav').accordion('panels');
var t = pp[0].panel('options').title;
$('#wnav').accordion('select', t);
}
// 初始化左侧
function InitLeftMenu() {
hoverMenuItem();
$('#wnav li a').live('click', function() {
var tabTitle = $(this).children('.nav').text();
var url = $(this).attr("rel");
var menuid = $(this).attr("ref");
var icon = getIcon(menuid, icon);
addTab(tabTitle, url, icon);
$('#wnav li div').removeClass("selected");
$(this).parent().addClass("selected");
});
}
/**
* 菜单项鼠标Hover
*/
function hoverMenuItem() {
$(".easyui-accordion").find('a').hover(function() {
$(this).parent().addClass("hover");
}, function() {
$(this).parent().removeClass("hover");
});
}
function Clearnav() {
var pp = $('#wnav').accordion('panels');
$.each(pp, function(i, n) {
if (n) {
var t = n.panel('options').title;
$('#wnav').accordion('remove', t);
}
});
pp = $('#wnav').accordion('getSelected');
if (pp) {
var title = pp.panel('options').title;
$('#wnav').accordion('remove', title);
}
}
//增加
function addNav(data) {
$.each(data, function(i, sm) {
var menulist = "";
menulist += '<ul>';
$.each(sm.menus, function(j, o) {
menulist += '<li><div><a ref="' + o.menuid + '" href="#" rel="'
+ o.url + '" ><span class="icon ' + o.icon
+ '" > </span><span class="nav">' + o.menuname
+ '</span></a></div></li> ';
});
menulist += '</ul>';
$('#wnav').accordion('add', {
title : sm.menuname,
content : menulist,
iconCls : 'icon ' + sm.icon
});
});
var pp = $('#wnav').accordion('panels');
var t = pp[0].panel('options').title;
$('#wnav').accordion('select', t);
}
// 初始化左侧
function InitLeftMenu() {
hoverMenuItem();
$('#wnav li a').live('click', function() {
var tabTitle = $(this).children('.nav').text();
var url = $(this).attr("rel");
var menuid = $(this).attr("ref");
var icon = getIcon(menuid, icon);
addTab(tabTitle, url, icon);
$('#wnav li div').removeClass("selected");
$(this).parent().addClass("selected");
});
}
/**
* 菜单项鼠标Hover
*/
function hoverMenuItem() {
$(".easyui-accordion").find('a').hover(function() {
$(this).parent().addClass("hover");
}, function() {
$(this).parent().removeClass("hover");
});
}
大至思路就是 点击顶级菜单后左侧先清空在添加,清空和添加均使用EASYUI插件提供的 remove 和 add 方法
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!