在做某些管理系统时,大多数情况都会用到级联菜单,可以对项目中的各个模块进行组织和管理,同时每个模块一般会有多个页面,所以针对这些情况就要生成指定功能的菜单了。下面是基于jQuery的简单的级联菜单。
html中的布局采用如下结构:
<ul id="rootMenu">
<li>
<div style="background: #0000FF;">新闻 </div>
<ul style="margin-left: 6px;">
<li>
<div style="background: #0000FF;margin:2px;">美食</div>
<ul style="margin-left: 6px;">
<li>西瓜</li>
<li>苹果</li>
</ul>
</li>
<li>健康</li>
</ul>
</li>
<li>
<div style="background: #0000FF;">娱乐 </div>
<ul style="margin-left: 6px;">
<li>电视</li>
<li>电影</li>
</ul>
</li>
</ul>
当然在这只是一个布局而已,做好后我们只需要<ul id="rootMenu"></ul>
这个节点就可以了,因为里面的菜单是通过数据来生成的。具体 方法如下:
function genMenuByData(parent, menuItems) {
var curNode;
for(var i = 0; i < menuItems.length; i++) {
if(menuItems[i].subItems) {
curNode = $('<li><div style="background: #0000FF;">' + menuItems[i].title + '</div></li>').appendTo(parent);
curNode = $('<ul style="margin-left: 6px;"></ul>').appendTo(curNode);
genMenuByData(curNode, menuItems[i].subItems)
} else {
parent.append(
'<li>' + menuItems[i].title + '</li>'
);
}
}
}
数据格式为:
var menuData = [{
title: '新闻 ',
subItems: [{
title: '美食',
subItems: [{
title: '西瓜'
}, {
title: '苹果'
}]
}, {
title: '健康'
}]
}, {
title: '娱乐 ',
subItems: [{
title: '电视'
}, {
title: '电影'
}]
}];
方法调用时,我们只需传入根节点和菜单数据进去即可:genMenuByData($('#rootMenu'), menuData);
这样就可以生成我们所需的级联菜单了。
这个菜单中,如果某个菜单有子菜单,则标识为蓝色,子菜单本身就不标色了。
genMenuByData
方法的基本思路是,遍历每个菜单节点数据,如果某个节点有子节点,则先生成父级菜单内容,然后保存该父级菜单中的一个jQuery对象,再递归调用,传入当前的父级对象和它相关的所有子菜单数据,某个节点没有子节点时,则直接生成该子节点即可,即直函数中的else
分支,上述代码只是提供一个大概的思路,在实际项目中应该还要完善很多细节方面的问题,仅供参考。