サブナビゲーション（フォーカス機能）を使用したJS/JQueryキーダウンサイクルが期待通りに機能しない

Question

アクセシビリティのために、私は自分のナビゲーションにフォーカス機能を拡張する必要があります。フォーカスをオンにすると、サブナビゲーションに表示されます。ダウンまたはアップキーが押されると、jqueryはフォーカスを維持しながらサブナビゲーション内のアイテムを繰り返し表示します。私はこれをほぼ釘付けにしましたが、jquery next（）は期待どおりに動作していません。代わりに2つをスキップしたり、ランダムな順序で進むことがあります。

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/

Answer 1

の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"); 
    })