首页 > 代码库 > [JavaScritp]构建简单的json树形菜单
[JavaScritp]构建简单的json树形菜单
json结构：
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:"" }] }] }];
构建菜单处理函数
/* * @构建树形菜单 * @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="http://www.mamicode.com/‘+oUrl+‘">‘+oText+‘</a>‘; menuTree(jsonArr[i].submenu,oLi);//递归构建子菜单 }else{ oLi.innerHTML = ‘<a href="http://www.mamicode.com/‘+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); }
完整demo：
<!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="http://www.mamicode.com/‘+oUrl+‘">‘+oText+‘</a>‘; menuTree(jsonArr[i].submenu,oLi);//递归构建子菜单 }else{ oLi.innerHTML = ‘<a href="http://www.mamicode.com/‘+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>
[JavaScritp]构建简单的json树形菜单
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。