js实现递归调用菜单

最新推荐文章于 2025-09-05 14:38:23 发布

原创最新推荐文章于 2025-09-05 14:38:23 发布 · 1.6k 阅读

0 ·

CC 4.0 BY-SA版权

js 专栏收录该内容

78 篇文章

订阅专栏

本文介绍了一种使用JavaScript通过递归函数构建多层次嵌套列表的方法。示例代码展示了如何从预定义的数据结构中生成HTML列表，适用于创建复杂的菜单或树状结构。

效果如图：

var data = [
        {
            name: 'AAA',
            child: [
                {
                    name: 'a1',
                    child: [
                        {
                            name: 'a1-1'
                        },
                        {
                            name: 'a1-2'
                        }
                    ]
                },
                { name: 'a2' }
            ]
        },
        {
            name: 'BBB',
            child: [
                {
                    name: 'b1'
                },
                {
                    name: 'b2'
                }
            ]
        },
        {
            name: 'CCC',
            child: [
                {
                    name: 'c1'
                },
                {
                    name: 'c2'
                }
            ]
        }
    ];
    var lists = $(".lists");
    function build(ele, arr) {
        var strUl = $('<ul></ul>');
        for (var i = 0; i < arr.length; i++) {
            var strLi = $("<li>" + arr[i].name + "</li>");
            strLi.appendTo(strUl);
            if (arr[i].child) {
                build(strLi, arr[i].child);
            }
        }
        strUl.appendTo(ele);
    }
    build(lists, data);