easyui学习笔记之动态创建手风琴菜单

本文记录了使用EasyUI库动态生成手风琴菜单的过程,通过JSON数据片段进行解析,实现灵活的菜单结构。适合需要在网页中构建可折叠、层次清晰的导航菜单的开发者参考。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

</pre><p>html</p><p></p><pre name="code" class="html"><pre name="code" class="html"><div region="west" split="true" title="导航菜单" style="width:200px;" id="west">
				<div class="easyui-accordion" fit="true" border="false">
					<!--  导航内容 -->
					<div title="菜单一" data-options="selected:true,iconCls:'icon-folder'" style="padding: 10PX;width: 100%;" id="accoridDiv">
						<ul>
							<li>
								<div><a href="#" target="mainFrame">菜单一一</a></div>
							</li>
							<li>
								<div><a href="#" target="mainFrame">菜单一二</a></div>
							</li>
						</ul>
					</div>
			</div>

js代码

<pre name="code" class="javascript">$.each(_menus.menus, function(i, n) {
			menulist += "<ul>";
			$.each(n.menus, function(j, o) {
				menulist += "<li><div><a target='mainFrame'>" + o.menuname + "</a></div></li> ";
			})
			menulist += "</ul>";
		$(".easyui-accordion").accordion("add", {
			title: n.menuname,
			content:menulist
		})
		menulist = "";  //每次循环完子菜单后清空,避免内容重复
	})

json片段

var _menus = {
			"menus": [{
				"menuid": "1",
				"menuname": "系统管理",
				"menus": [{
					"menuname": "菜单管理",
					"url": "http://www.16sucai.com"
				}, {
					"menuname": "添加用户",
				}, {
					"menuname": "用户管理",
				}, {
					"menuname": "角色管理",
				}, {
					"menuname": "权限设置",
				}, {
					"menuname": "系统日志",
				}]
			}, {
				"menuid": "8",
				"menuname": "员工管理",
				"menus": [{
					"menuname": "员工列表",
				}, {
					"menuname": "视频监控",
				}]
			}, {
				"menuid": "56",
				"menuname": "部门管理",
				"menus": [{
					"menuname": "添加部门",
				}, {
					"menuname": "部门列表",
				}]
			}, {
				"menuid": "28",
				"menuname": "财务管理",
				"menus": [{
					"menuname": "收支分类",
				}, {
					"menuname": "报表统计",
				}, {
					"menuname": "添加支出",
				}]
			}, {
				"menuid": "39",
				"menuname": "商城管理",
				"menus": [{
					"menuname": "商品分",
				}, {
					"menuname": "商品列表",
				}, {
					"menuname": "商品订单",
				}]
			}]
		};




评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值