我一直在试着如何让这个动态菜单以比我现在更清晰的方式工作，我目前收到的菜单项列表是一个扁平的XML结构。
我在下面创建了一个对象，说明了数据在对象内部的外观，它为每个菜单项都有一个父子关系（我为了便于阅读而缩进）
let Menu = [
{
DisplayName : "Menu1",
href : "Menu1.aspx",
MenuID : "1",
ParentMenuID : "?",
Position : "1",
UserTypeCode : "99"
},
{
DisplayName : "Menu-1-1",
href : "Menu1.aspx",
MenuID : "2",
ParentMenuID : "1",
Position : "1",
UserTypeCode : "99"
},
{
DisplayName : "Menu-1-2",
href : "Menu1.aspx",
MenuID : "3",
ParentMenuID : "1",
Position : "2",
UserTypeCode : "99"
},
{
DisplayName : "Menu2",
href : "Menu2.aspx",
MenuID : "4",
ParentMenuID : "?",
Position : "2",
UserTypeCode : "99"
},
{
DisplayName : "Menu2-1",
href : "Menu1.aspx",
MenuID : "5",
ParentMenuID : "4",
Position : "1",
UserTypeCode : "99"
},
{
DisplayName : "Menu2-2",
href : "Menu1.aspx",
MenuID : "6",
ParentMenuID : "4",
Position : "2",
UserTypeCode : "99"
},
{
DisplayName : "Menu2-2-1",
href : "Menu1.aspx",
MenuID : "7",
ParentMenuID : "6",
Position : "1",
UserTypeCode : "99"
}
];
我想知道如何动态创建菜单对象（使用递归函数，我相信这将是理想的）没有我当前有点凌乱的解决方案，需要为我的菜单的每个级别提供不同的功能，这是我的代码看起来像是在分钟，它仅限于3级菜单
我想要的是一个很好的功能，它可以接受任意数量的菜单级别
function createRoot(){
// Initially map all root elements
Menu.map((item, index) => {
if (item.ParentMenuID === "?"){
// If the the next menu item is a child of this root
if (Menu[index+1].ParentMenuID === item.MenuID){
// Generate boilerplate dropdown code + then retrieve it's children
htmlStr += `<li class="dropdown-submenu"><a class="test" data-menuID="`+item.MenuID+`" data-menuitem="`+item.href+`" href="#">`+item.DisplayName+`<span class="caret"></a>`
htmlStr += `<ul class="dropdown-menu">`
GetLevel1(item);
htmlStr += `</ul>`
htmlStr += `</li>`
// Otherwise it's just a normal menu item
} else {
htmlStr += `<li><a class="test" data-menuID="`+item.MenuID+`" data-menuitem="`+item.href+`" href="#">`+item.DisplayName+`</a></li>`
}
}
});
$('#user-menu-list').html(htmlStr);
// Setup event on list items
$('.dropdown-submenu a.test').on("click", function(e){
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
}
function GetLevel1(item){
Menu.map((subItem, index) => {
if (index < Menu.length-1){
console.log(index);
// If the current item is a child of the root
if (subItem.ParentMenuID === item.MenuID){
// If the the next item is a child of this root
if (Menu[index+1].ParentMenuID === subItem.MenuID){
htmlStr += `<li class="dropdown-submenu"><a class="test" data-menuID="`+subItem.MenuID+`" data-menuitem="`+subItem.href+`" href="#">`+subItem.DisplayName+`<span class="caret"></a>`
htmlStr += `<ul class="dropdown-menu">`
GetLevel2(subItem);
htmlStr += `</ul>`
htmlStr += `</li>`
} else {
htmlStr += `<li><a class="test" data-menuID="`+subItem.MenuID+`" data-menuitem="`+subItem.href+`" href="#">`+subItem.DisplayName+`</a></li>`
}
}
}
});
}
function GetLevel2(item){
Menu.map((subItem, index) => {
console.log("INDEX: "+index);
// If the current item is a child of the root
if (subItem.ParentMenuID === item.MenuID){
htmlStr += `<li><a class="test" data-menuID="`+subItem.MenuID+`" data-menuitem="`+subItem.href+`" href="#">`+subItem.DisplayName+`</a></li>`
}
});
}
createRoot();
这是一个完整的pastebin链接，我的菜单在一分钟工作：http://pastebin.com/ektBQ7kd
非常感谢任何帮助！
答案 0 :(得分：0)
我的递归能力有点生疏，可以改进， 我会做这样的事， 首先查看所有菜单，将儿童菜单添加到他们的父母。
在第一阶段完成后，我在一个对象中有菜单和子菜单，您可以再次进行递归并构建菜单。
这样的事情：
var Menu = [{
DisplayName: "Menu1",
href: "Menu1.aspx",
MenuID: "1",
ParentMenuID: "?",
Position: "1",
UserTypeCode: "99"
}, {
DisplayName: "Menu-1-1",
href: "Menu1.aspx",
MenuID: "2",
ParentMenuID: "1",
Position: "1",
UserTypeCode: "99"
}, {
DisplayName: "Menu-1-2",
href: "Menu1.aspx",
MenuID: "3",
ParentMenuID: "1",
Position: "2",
UserTypeCode: "99"
}, {
DisplayName: "Menu2",
href: "Menu2.aspx",
MenuID: "4",
ParentMenuID: "?",
Position: "2",
UserTypeCode: "99"
}, {
DisplayName: "Menu2-1",
href: "Menu1.aspx",
MenuID: "5",
ParentMenuID: "4",
Position: "1",
UserTypeCode: "99"
}, {
DisplayName: "Menu2-2",
href: "Menu1.aspx",
MenuID: "6",
ParentMenuID: "4",
Position: "2",
UserTypeCode: "99"
}, {
DisplayName: "Menu2-2-1",
href: "Menu1.aspx",
MenuID: "7",
ParentMenuID: "6",
Position: "1",
UserTypeCode: "99"
}];
var main = [];
function getSiblins(currentNode, currentId) {
if (!currentId) {
currentNode.children = currentNode.children || new Array();
return getSiblins(currentNode, currentNode.MenuID)
} else {
for (var j = 0; j < Menu.length; j++) {
if (Menu[j].ParentMenuID == currentId) {
currentNode.children.push(Menu[j]);
}
}
}
if (currentNode.ParentMenuID == "?") {
//root menu
main.push(currentNode);
}
}
for (var i = 0; i < Menu.length; i++)
getSiblins(Menu[i]);
function prepareMenu(currentMenu) {
var appendHtml = "<li>" + currentMenu.DisplayName + "</li>"
for (var i = 0; i < currentMenu.children.length; i++) {
appendHtml = appendHtml + "<ul class='children'>" + prepareMenu(currentMenu.children[i]) + "</ul>";
}
return appendHtml;
}
var menuHtml = "";
for (var j = 0; j < main.length; j++) {
menuHtml += prepareMenu(main[j]);
}
document.getElementById("finalMenu").innerHTML = menuHtml;.children li{
color: blue;
}
.children .children li {
color: green;
}<ul id="finalMenu">
</ul>