Javascript 逐步遍历数组和子数组

我希望得到一些建议。基本上，我有一个数组中存储的菜单项，任何项目可能有它自己的子菜单项。我试图弄清楚如何跟踪用户当前正在滚动的菜单（数组）。最终目标是用户使用键盘上的键可以从一个项目切换到另一个项目，如果有子菜单，他们可以选择访问这些项目。以下代码是“我的菜单项”的存储方式。谢谢你的建议，谢谢

var menu = [{
    "title": "Home",
    "link": "/index.jsp"
}, {
    "title": "Our Company",
    "link": "javascript:;",
    "subMenu": [{
        "title": "Employees",
        "link": "/employees"
        }, {
        "title": "Investors →",
        "link": "/invest",
        "subMenu": [{
            "title": "News",
            "link": "/invest/news"
        }, {
            "title": "History",
            "link": "/invest/history"
        }]
    }, {
        "title": "xyz",
        "link": "/xyz"
    }, {
        "title": "xyz",
        "link": "/xyz"
    }, {
        "title": "xyz",
        "link": "/xyz"
    }, {
        "title": "xyz",
        "link": "/xyz/"
    }]
}, {
    "title": "Human Resources",
    "link": "javascript:;",
    "subMenu": [{
        "title": "Apply",
        "link": "/apply"
    }, {
        "title": "Information",
        "link": "/info"
    }, {
        "title": "Complaints",
        "link": "/complains"
    }]
}];

目前为止，我只有一个变量，它的数字在按电路板上的键时会增加/减少。我知道当他们访问某个项目时，我可以检查该项目是否存在子菜单，只是在访问子菜单时，我很难跟踪父项目，等等

---

我是否应该考虑使用另一个数组来跟踪用户当前使用的菜单项？当它们导航时，将它们推出/弹出？

添加带有链接的树结构是解决问题的一种方法

导航通过使用箭头键选择菜单中的下一项或上一项（相对于当前项），或向上转到包含当前子菜单的项，或向下转到属于当前项的子菜单中的第一项（如果存在）

概念代码：

function linkMenu( menu, parent = null)
{ menu.parentItem = parent;
  menu.firstItem = menu[0] || null;
  menu.lastItem = menu[menu.length-1] || null
  menu.forEach(function( item,i, menu) {
    item.parentMenu = menu;                  // update
    item.previousItem = menu[i-1] || null;
    item.nextItem = menu[i+1] || null;
    if( item.subMenu) {
       linkMenu(item.subMenu,  item);
       item.firstChildItem = item.subMenu.firstItem || null;
    }
  });
}

使用发布的菜单定义可以得到以下示例结果

linkMenu(menu)
menu.firstItem.nextItem.firstChildItem.nextItem.title; // Investors →

这种链接通常是典型的树状结构，但也有选择：如果需要，导航可以围绕第一个和最后一个项目，实际应用程序可能不需要所有链接设置或根据需要修改它们——比如使项目所在的子菜单更容易获取

---

处理箭头键需要了解可视化模型，但举例来说

• 主菜单是水平的
• 子菜单是垂直的
• 子菜单的子菜单是垂直的，并向右层叠

• currentItem

  指向当前选定的菜单项

• closeSubMenu

  和

  openSubMenu

  是接受项参数的函数

• main菜单

  是表达式

  （！currenItem.parentItem）

箭头处理的伪代码可能类似于

左箭头：

右箭头：

向下箭头：

向上箭头：

---

未包括视觉突出显示。如果在处理箭头键后将焦点传递给当前项，则可能会有所帮助

不确定如何为给定菜单创建DOM元素，但您可以依靠DOM层次结构了解当前选择（活动元素）、父项、子项等。如果您使用/准备使用JQuery，可能会变得更简单。谢谢，这似乎是我需要的。我仍然无法理解如何使用此链接导航项目？从一开始，多次按右键应该会导致“家”>“我们公司”>“人力资源”。从我们公司或人力资源部按下将进入这些子菜单，如果子菜单中的链接有另一个子菜单，右箭头将访问该子菜单，等等。再次感谢您的时间。@RON2015更新答案中的一些想法。如果您想要忠实地再现窗口类型的菜单导航，那么它可能会变得更加复杂。快乐编码：-）非常感谢您的更新，我快到了。但是链接菜单功能有问题吗？似乎它没有得到子菜单的子菜单。它只获取第一个“主菜单”及其子菜单。抱歉，忽略我最后的评论，子菜单正在添加，但在尝试导航时，似乎父项总是未定义。项目不知道他们在什么菜单上。我将其添加为

item.parentMenu

，它应该从

item.parentMenu.parentItem

打开。

if( mainMenu) currentItem = currentItem.previousItem || currentItem;
else closeSubMenu( currentItem.parentItem),
     currentItem = currentItem.parentMenu.parentItem);  // update

if(mainMenu) currentItem = currentItem.nextItem || currentItem;
else if( currenItem.firstChildItem)
    openSubMenu( currentItem),
    currentItem = current.firstChildItem;

if mainMenu && currentItem.firstChildItem)
    openSubMenu( currentItem),
    currentItem = current.firstChildItem;
else if(!mainMenu)
    currentItem = currentItem.nextChild || currentItem;

if( mainMenu) ; // do nothing
else currentItem = currentItem.previousChild || currerntItem;