js递归,无限分级树形折叠菜单

摘要：效果图表结构形式数据数据第一级是第二级是广东第二级是广西第三级是玉林第三级是北流广东广州天河白云广西玉林北流深圳东莞松山湖部分获取省一级递归结构形式数据数据广东广州天河白云深圳东莞松山湖广西玉林北流部分获取省一级递归两者区别数据表形式数据递

第一级是id:0

第二级是id:1,name:"广东",pid:0

第二级是id:5,name:"广西",pid:0

第三级是id:6,name:"玉林",pid:5

第三级是id:7,name:"北流",pid:6

            var data = [
                { id: 1, name: "广东", pid: 0 },
                { id: 2, name: "广州", pid: 1 },
                { id: 3, name: "天河", pid: 2 },
                { id: 4, name: "白云", pid: 2 },
                { id: 5, name: "广西", pid: 0 },
                { id: 6, name: "玉林", pid: 5 },
                { id: 7, name: "北流", pid: 6 },
                { id: 8, name: "深圳", pid: 1 },
                { id: 9, name: "东莞", pid: 1 },
                { id: 10, name: "松山湖", pid: 9 },
            ]

            var menu = "";
            menuFn(0, data)
            $("body").append(menu)

            function menuFn(id, data) {
                if (data.length > 0) {
                    for (var i = 0; i < data.length; i++) { //获取省一级
                        if (data[i].pid == id) {
                            // console.log(data[i])
                            menu += "
"
                                menu += "
" + data[i].name
                                // menu += "
"+"id::" + data[i].id + ",name:"+ data[i].name + ",pid:"+ data[i].pid
                                menuFn(data[i].id, data)   //递归
                                menu += "
"
                            menu += "
"
                        }
                    }
                    return menu;
                }
            }

            var data = [
                {
                    id: 1, name: "广东", pid: 0,
                    children: [
                        {
                            id: 2, name: "广州", pid: 1,
                            children: [
                                { id: 3, name: "天河", pid: 2 },
                                { id: 4, name: "白云", pid: 2 },
                            ],
                        },
                        { id: 8, name: "深圳", pid: 1 },
                        {
                            id: 9, name: "东莞", pid: 1,
                            children: [
                                { id: 10, name: "松山湖", pid: 9 },
                            ]
                        },
                    ]
                },
                {
                    id: 5, name: "广西", pid: 0,
                    children: [
                        {
                            id: 6, name: "玉林", pid: 5,
                            children: [
                                { id: 7, name: "北流", pid: 6 },
                            ]
                        },
                    ]
                },
            ];

            var menu = "";
            menuFn(0, data)
            $("body").append(menu)

            function menuFn(id, data) {
                if (data.length > 0) {
                    for (var i = 0; i < data.length; i++) { //获取省一级
                        if (data[i].pid == id) {
                            // console.log(data[i])
                            menu += "
"
                            menu += "
" + data[i].name
                            // menu += "
"+"id::" + data[i].id + ",name:"+ data[i].name + ",pid:"+ data[i].pid
                            if (data[i].children) {
                                menuFn(data[i].id, data[i].children)   //递归
                            }

                            menu += "
"
                            menu += "
"
                        }
                    }
                    return menu;
                }
            }

数据表形式数据

menuFn(data[i].id, data)   //递归

json形式数据

if (data[i].children) {
    menuFn(data[i].id, data[i].children)   //递归
}

function fn() {
   // console.log(this)  //span   em
}
$("#app").delegate("span", "click", fn)
$("#app").delegate("em", "click", fn)

$(this).parent().children("ul")[0]
$($(this).parent().children("ul")[0])

    
    
    
    
    
广东
广州
天河
白云
深圳
东莞
松山湖
广西
玉林
北流
广东
广州
天河
白云
深圳
东莞
松山湖
广西
玉林
北流