навигация по клавиатуре в списке li с дочерними элементами li с помощью JavaScript - PullRequest
Новая
       44

навигация по клавиатуре в списке li с дочерними элементами li с помощью JavaScript

0 голосов
/ 04 октября 2018

Я пытаюсь создать оглавление, например, меню с клавиатурной навигацией.Благодаря другому сообщению на этом форуме, я нашел фрагмент кода, который делает использование клавиш со стрелками вверх и вниз через элементы li довольно простым.Однако попытка расширить это, чтобы охватить элементы li внутри элементов li, оказывается трудной.

Я работаю в этом коде - 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');
        }
    }
});

Затем пытаюсьчтобы использовать клавишу ввода, чтобы открыть «выбранный» элемент 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).Тогда мое «else if», очевидно, не работает, потому что я не могу снова использовать клавишу ввода, чтобы «закрыть» подменю.

Как бы я изменил это, чтобы открыть только одно «подменю» (дочерние элементы элемента li, который в данный момент имеет класс «selected»), и затем смог бы закрыть это же «подменю», нажав Enterснова ключ, когда он открыт?

Любой совет приветствуется, спасибо.

...