构建简单的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:""
                }]
            }]
        }];
View Code
复制代码

构建菜单处理函数

复制代码
/*
     * @构建树形菜单
     * @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);
    }
View Code
复制代码

完整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="'+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

 

作者：GeniusLyzh
出处：http://www.cnblogs.com/GeniusLyzh/
本文链接：https://www.cnblogs.com/GeniusLyzh/p/4064714.html
本文版权归作者和博客园共有，欢迎转载，须保留此段声明，并给出原文链接，谢谢！
如果阅读了本文章，觉得有帮助，欢迎点击右下角推荐
posted @   Aarongo  阅读(3387)  评论(0)  编辑  收藏  举报
编辑推荐：
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 单线程的Redis速度为什么快？
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 展开说说关于C#中ORM框架的用法！
点击右上角即可分享
微信分享提示