li列表上的键盘导航以及带有JavaScript的子li元素

Question

我正在尝试使用键盘导航创建目录（如菜单）。感谢该论坛上的另一篇文章，我找到了一段代码，使得通过li元素使用上下箭头键非常简单。然而，试图扩展该范围以覆盖li元素内部的li元素已被证明是困难的。

我正在使用此Codepen-https://codepen.io/kbeats/pen/YJWzeP

我目前使用键查看li元素的内容如下：

var li = $('li.tile');
var liSelected;
$(window).keydown(function(e) {
    if(e.which === 40) {
        if(liSelected) { // just a boolean variable at this point?
            liSelected.removeClass('selected');
            next = liSelected.next();
            if(next.length > 0) {
                liSelected = next.addClass('selected');
            } else {
                liSelected = li.first().addClass('selected');
            }
        } else {
            liSelected = li.first().addClass('selected');
        }
    } else if(e.which === 38) {
        if(liSelected) {
            liSelected.removeClass('selected');
            next = liSelected.prev();
            if(next.length > 0) {
                liSelected = next.addClass('selected');
            } else {
                liSelected = li.last().addClass('selected'); // not properly selecting last() because of submenu items ? 
            }
        } else {
            liSelected = li.last().addClass('selected');
        }
    }
});

然后尝试使用Enter键打开“选定的” li元素：

$(window).keydown(function(e){
  if(e.which === 13){
    if(liSelected){
      var $subItem = $("ul, li");
      $subItem.show();
    } else if ($(subItem).hasClass("active")) {
      $subItem.hide();
    }
  }
})

这就是我被困住的地方。首先，当我只希望打开活动菜单（li）元素的子菜单时，此代码使用Enter键打开所有“子菜单”。然后我的“ else if”显然不起作用，因为我无法再次使用Enter键来“关闭”子菜单。

我将如何更改它以仅打开一个“子菜单”（当前具有类“ selected”的li元素的孩子），然后在再次按下Enter键时能够关闭该“子菜单”它是开放的吗？

任何建议，谢谢。