JS/JQuery keydown цикл через вспомогательную навигацию (функция фокуса) не работает должным образом

Для обеспечения доступности мне требуется расширенная функция фокуса в моей навигации. на фокусе отображаются суб-навигаторы, если нажаты клавиши «вниз» или «вверх», jquery будет циклически перемещаться по элементам на навигационной панели при сохранении фокуса. Я почти прибил это, однако jquery next() работает не так, как ожидалось, вместо этого он пропускает два или иногда просто идет в случайном порядке.JS/JQuery keydown цикл через вспомогательную навигацию (функция фокуса) не работает должным образом

HTML: -

<nav class="nav nav--primary" role="navigation"> 

      <a href="/" title="Home" class="primary-nav-link parent active" data-position="1" tabindex="1">wasd</a> 

      <div class="nav__dropdown"> 
        <a class="primary-nav-link parent " tabindex="1">wasd</a> 
       <span class="nav__expand"></span> 
       <div class="nav__dropdown__content" aria-hidden="true"> 
         <a href="#" class="sub-nav-link" tabindex="-1" data-position="3.1">wasd</a> 
         <a href="#" class="sub-nav-link" tabindex="-1" data-position="3.2">wasd</a> 
         <a href="#" class="sub-nav-link" tabindex="-1" data-position="3.3">wasd</a> 
         <a href="#" class="sub-nav-link" tabindex="-1" data-position="3.4">wasd</a> 
         <a href="#" class="sub-nav-link" tabindex="-1" data-position="3.5">wasd</a> 
       </div> 
      </div> 

      <div class="nav__dropdown"> 
        <a class="primary-nav-link parent " tabindex="1">wasd</a> 
       <span class="nav__expand"></span> 
       <div class="nav__dropdown__content" aria-hidden="true"> 
         <a href="#" class="sub-nav-link" tabindex="-1" data-position="3.1">wasd</a> 
         <a href="#" class="sub-nav-link" tabindex="-1" data-position="3.2">wasd</a> 
         <a href="#" class="sub-nav-link" tabindex="-1" data-position="3.3">wasd</a> 
         <a href="#" class="sub-nav-link" tabindex="-1" data-position="3.4">wasd</a> 
         <a href="#" class="sub-nav-link" tabindex="-1" data-position="3.5">wasd</a> 
       </div> 
      </div> 

      <div class="nav__dropdown"> 
        <a class="primary-nav-link parent " tabindex="1">wasd</a> 
       <span class="nav__expand"></span> 
       <div class="nav__dropdown__content" aria-hidden="true"> 
         <a href="#" class="sub-nav-link" tabindex="-1" data-position="3.1">wasd</a> 
         <a href="#" class="sub-nav-link" tabindex="-1" data-position="3.2">wasd</a> 
         <a href="#" class="sub-nav-link" tabindex="-1" data-position="3.3">wasd</a> 
         <a href="#" class="sub-nav-link" tabindex="-1" data-position="3.4">wasd</a> 
         <a href="#" class="sub-nav-link" tabindex="-1" data-position="3.5">wasd</a> 
       </div> 
      </div> 

</nav>

JS: -

$(".parent").focus(function(){ 

    $(this).closest(".nav__dropdown").addClass("hover"); 
    $('.hover .nav__dropdown__content a').first().addClass('navSelected'); 

     $(document).keydown(function(e) { 
      var selected = $('.navSelected'); 
      var sub = $('.hover .nav__dropdown__content a'); 


      if(e.which === 40){ 

       if(selected){ 
        selected.removeClass('navSelected'); 
        next = selected.next(); 
         if(next.length > 0){ 
          selected = next.addClass('navSelected'); 
         }else{ 
          selected = sub.eq(0).addClass('navSelected'); 
         } 
       }else{ 
        selected = sub.eq(0).addClass('navSelected'); 
       } 


      }else if(e.which === 38){ 
       if(selected){ 
        selected.removeClass('navSelected'); 
        next = selected.prev(); 
        if(next.length > 0){ 
       selected = next.addClass('navSelected'); 
        }else{ 
         selected = sub.last().addClass('navSelected'); 
        } 
       }else{ 
       selected = sub.last().addClass('navSelected'); 
       } 
      } 
     }); 

}).blur(function(){  
    $(".nav__dropdown").removeClass("hover"); 
    $(document).removeClass("navSelected"); 
})

работает JS скрипку: -

https://jsfiddle.net/zpnfzevb/

источник

2016-06-30 M T

Я не могу воспроизвести эту проблему в jsfiddle. –

Нажмите вверху справа от первой навигационной ссылки, затем дважды нажмите вкладку, чтобы получить фокус на правый элемент, и вы увидите субнав с зеленым выбранным элементом, нажмите клавиши вверх и вниз, и вы заметите, что это не так. Цикл в правильном порядке. –

Это не случайный порядок. Каждое меню имеет шаблон: A: 1,3,5,2,4; B: 5,4,3,2,1; C: 1,3,5,2,4. Я бы посмотрел вашу математику. Я также дамп каждого 'tabindex', поскольку у вас есть повторяющиеся значения, и вы полностью разбиваете табуляцию (поскольку в меню отсутствует' role = menu', пользователь не может ожидать, что стрелки будут работать). Короче говоря, пересмотреть вопрос о том, что означает «для доступности», поскольку я думаю, что вам были даны плохие технические требования. – aardrian

KeyDown событие связано с $ (документ) причиняло дополнительные циклы означают, что выбор будет в разных местах.

Событие теперь привязано к $ ('nav') и несвязано в функции размытия, оно удалило любые нежелательные триггеры и теперь ведет себя так, как ожидалось.

Итоговые JS ниже: -

$(".parent").focus(function(){ 

    $(this).closest(".nav__dropdown").addClass("hover"); 
    $('.hover .nav__dropdown__content a').first().addClass('navSelected'); 

     $('nav').keydown(function(e) { 
      var selected = $('.navSelected'); 
      var sub = $('.hover .nav__dropdown__content a'); 


      if(e.which === 40){ 

       if(selected){ 
        selected.removeClass('navSelected'); 
        next = selected.next(); 
         if(next.length > 0){ 
          selected = next.addClass('navSelected'); 
         }else{ 
          selected = sub.eq(0).addClass('navSelected'); 
         } 
       } 


      } 
      if(e.which === 38){ 
       if(selected){ 
        selected.removeClass('navSelected'); 
        next = selected.prev(); 
         if(next.length > 0){ 
          selected = next.addClass('navSelected'); 
         }else{ 
          selected = sub.last().addClass('navSelected'); 
         } 
       } 
      } 

      if(e.which === 13){ 
       if(selected){ 
       selected.trigger('click'); 
       } 
      } 

     }) 

    }).blur(function(){ 
    $('nav').unbind('keydown'); 
    $(".nav__dropdown").removeClass("hover"); 
    $(document).removeClass("navSelected"); 
    })

источник

2016-06-30 17:04:00

JS/JQuery keydown цикл через вспомогательную навигацию (функция фокуса) не работает должным образом

ответ

Смежные вопросы