javascript - 如何从 json 创建子子菜单

Question

我从一个 json 文件创建了一个水平菜单。但我无法创建 child 和子 child 。当我创建管理员的 child 时，它会转到家里的 child 。我的 javascript 文件是

var data = [{
    "menu":[
        {
            "MenuId":1,
            "MenuName":"Home",
            "MenuLink":null,
            "Action":null,
            "Controller":null,
            "ParentID":null,
            "SortOrder":1,
            "ModuleId":null,
            "Menus":{
            }
        },
        {
            "MenuId":2,
            "MenuName":"New Transaction",
            "MenuLink":null,
            "Action":null,
            "Controller":null,
            "ParentID":null,
            "SortOrder":2,
            "ModuleId":null,
            "Menus":{
            }
        },
        {
            "MenuId":3,
            "MenuName":"Portfolio",
            "MenuLink":null,
            "Action":null,
            "Controller":null,
            "ParentID":null,
            "SortOrder":3,
            "ModuleId":null,
            "Menus":{
            }
        },
        {
            "MenuId":4,
            "MenuName":"Analytics",
            "MenuLink":null,
            "Action":null,
            "Controller":null,
            "ParentID":null,
            "SortOrder":4,
            "ModuleId":null,
            "Menus":{
            }
        },
        {
            "MenuId":5,
            "MenuName":"Instructions",
            "MenuLink":null,
            "Action":null,
            "Controller":null,
            "ParentID":null,
            "SortOrder":5,
            "ModuleId":null,
            "Menus":{
            }
        },
        {
            "MenuId":6,
            "MenuName":"Data Upload",
            "MenuLink":null,
            "Action":null,
            "Controller":null,
            "ParentID":null,
            "SortOrder":6,
            "ModuleId":null,
            "Menus":{
            }
        },
        {
            "MenuId":7,
            "MenuName":"Administration",
            "MenuLink":null,
            "Action":null,
            "Controller":null,
            "ParentID":null,
            "SortOrder":7,
            "ModuleId":null,
            "Menus":[
                {
                    "MenuId":8,
                    "MenuName":"Masters",
                    "MenuLink":null,
                    "Action":null,
                    "Controller":null,
                    "ParentID":7,
                    "SortOrder":1,
                    "ModuleId":null,
                    "Menus":[
                        {
                            "MenuId":10,
                            "MenuName":"Currency",
                            "MenuLink":"/Currencies/Index",
                            "Action":"Index",
                            "Controller":"Currencies",
                            "ParentID":8,
                            "SortOrder":1,
                            "ModuleId":null,
                            "Menus":{
                            }
                        },
                        {
                            "MenuId":11,
                            "MenuName":"Country",
                            "MenuLink":"/Countries/Index",
                            "Action":"Index",
                            "Controller":"Countries",
                            "ParentID":8,
                            "SortOrder":2,
                            "ModuleId":null,
                            "Menus":{
                            }
                        }
                    ]
                },
                {
                    "MenuId":9,
                    "MenuName":"User Management",
                    "MenuLink":null,
                    "Action":null,
                    "Controller":null,
                    "ParentID":7,
                    "SortOrder":2,
                    "ModuleId":null,
                    "Menus":{
                    }
                }
            ]
        }
    ]
}
];
$(function() {
for(var i = 0, j = data[0].menu.length; i<j; i++) {
    var root_menu = data[0].menu[i];
    if(root_menu.hasOwnProperty("MenuId")) {
        $("#menu").append('<li><a href="#" class="parent-menu">' + root_menu.MenuName + '</a>');
        if(root_menu.hasOwnProperty("Menus") && root_menu.Menus.length > 0) {
            $("#menu li").append("<ul class='child-list' id='menu_" + root_menu.MenuId + "'>");
            for(var n = 0, m = root_menu.Menus.length; n<m; n++) {
                var sub_menu = root_menu.Menus[n];
                if(sub_menu.hasOwnProperty("MenuId")) {
                    $("#menu_" + root_menu.MenuId).append("<li class='menu-child'><a href='#'>" + sub_menu.MenuName + "</a></li>");

                }
            }

        }
 $("#menu").append("</ul></li>");

    }
}
});

您可以从http://jsfiddle.net/JcU4G/9/ 查看我的代码这里的 child 还有一个子 child 。我如何从 json 文件中安排 child 和子 child ？

Answer 1

由于您正在循环并将 li 元素添加到主菜单中，因此您可以简单地使用 .last()

$("#menu li").last().append("<ul class='child-list' id='menu_" + root_menu.MenuId + "'>");

这会将子菜单附加到右侧的主菜单项 =)

编辑: 要添加另一个子子菜单，请按照以下行添加内容:

if(sub_menu.hasOwnProperty("Menus") && sub_menu.Menus.length > 0){
                    $("#menu_" + root_menu.MenuId + " li").last().append("<ul class='child-list' id='menu_" + sub_menu.MenuId + "'>");
                    for(var oo = 0, pp = sub_menu.Menus.length; oo<pp; oo++){
                        var subsub_menu = sub_menu.Menus[oo];
                        $("#menu_" + sub_menu.MenuId).append("<li></li>")
                    }
                    $("#menu_" + root_menu.MenuId + " li").last().append("</ul>");
                }

当然，您现在必须拉直样式......以正确显示 subsub_menu 元素。 这是一个 fiddle ，我在其中 fork 了您的示例并将其剥离了样式:jsfiddle.net/HPNkq

考虑到您是编程新手，我不想重写您的整个代码，只是添加了与您已经编码的方式相同的位。但是，我会通过定义一个函数来处理这样的问题，该函数生成菜单级别并在元素具有子菜单时再次递归调用自身。