Question

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

var menu = [{
    "title": "Home",
    "link": "/index.jsp"
}, {
    "title": "Our Company",
    "link": "javascript:;",
    "subMenu": [{
        "title": "Employees",
        "link": "/employees"
        }, {
        "title": "Investors &rarr;",
        "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"
    }]
}];

截至目前，我只有一个变量，其数字可以在按下主板上的键时增加/减少。我知道我可以查看任何项目访问时是否存在subMenu，我只是在访问子菜单等时无法跟踪父项目。

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

Answer 1

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

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

概念代码：

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 &rarr;

这种连接通常是树结构的典型，但有一些选择：如果需要，导航可以包裹第一个和最后一个项目，并且实际应用程序可能不需要所有链接设置或根据需要修改它们 - 比如说使子菜单更容易获得。

<小时/> 处理箭头键需要知道视觉模型，但比如说

主菜单是水平的
子菜单是垂直的
子菜单的子菜单是垂直的并且向右级联
currentItem指向当前选定的菜单项
closeSubMenu和openSubMenu是采用商品参数的函数。
mainMenu是表达式(!currenItem.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;

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

单步执行数组和子数组

1 个答案: