您的位置：首页 > Web前端 > JavaScript

构建简单的json树形菜单

2014-10-31 12:06 232 查看

json结构：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>json树形菜单</title>
</head>
<body>
<h2>构建json树形菜单</h2>
<div class="tree" id="tree"></div>
<script type="text/javascript">
window.onload = function(){
var Menu = [{
tit:"一级菜单",
submenu:[{
tit:"二级菜单",
url:"",
func:function(){
alert('what do you want to do?');
}
},{
tit:"二级菜单",
func:function(){
alert('do what?');
},
submenu:[{
tit:"三级菜单",
url:"",
submenu:[{
tit:"四级菜单",
url:""
},{
tit:"四级菜单",
url:""
}]
},{
tit:"三级菜单",
url:""
}]
}]
},{
tit:"一级菜单",
submenu:[{
tit:"二级菜单",
url:""
},{
tit:"二级菜单",
submenu:[{
tit:"三级菜单",
url:""
},{
tit:"三级菜单",
url:""
}]
}]
}];
//构建菜单
menuTree(Menu,document.getElementById('tree'),'tree');
}

/*
* @构建树形菜单
* @arrJson:json数据
* @container:菜单容器
*/
function menuTree(jsonArr,container,treeId){
var oText,oUrl;
var oUl = document.createElement('ul');
for(var i = 0 ;i < jsonArr.length; i++){
var oLi = document.createElement('li');
oUrl = jsonArr[i].url || "javascript:void(0)";
oText = jsonArr[i].tit;
if(jsonArr[i].submenu){
oLi.innerHTML ='<a href="'+oUrl+'">'+oText+'</a>';
menuTree(jsonArr[i].submenu,oLi);//递归构建子菜单
}else{
oLi.innerHTML = '<a href="'+oUrl+'">'+oText+'</a>';
}
//自定义函数
if(typeof jsonArr[i].func =="function"){
oLi.getElementsByTagName('a')[0].func = jsonArr[i].func;
oLi.getElementsByTagName('a')[0].onclick=function(){
this.func();
}
}
oUl.appendChild(oLi);
}
//最外层容器事件委托
if(treeId){
document.getElementById(treeId).onclick = function(e){
var event = e || window.event;
var target = event.target||event.srcElement;
var next = target.nextSibling;
if(target.nodeName.toLowerCase() == "a"){
if(next){
if(next.style.display=="" || next.style.display=="block"){
next.style.display="none";
}else{
next.style.display="block";
}
}
}
}
}
container.appendChild(oUl);
}
</script>
</body>
</html>

View Code
效果图：

完整实例：

menuTreeDemo.zip

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航