gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 15:14:48 25 4
gpt4 key购买 nike

我从一个 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 ?

最佳答案

由于您正在循环并将 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

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

关于javascript - 如何从 json 创建子子菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15108230/

25 4 0