JS/JQuery Keydown-Zyklus durch Sub-Nav (Fokus-Funktion) funktioniert nicht wie erwartet

Question

Für die Erreichbarkeit ich muss erweiterte Fokusfunktion auf meiner Navigation haben. Wenn der Fokus auf das Sub-Navi gerichtet ist, wird, wenn die Abwärts- oder Hoch-Taste gedrückt wird, die JQuery durch die Elemente in dem Sub-Nav durchgehen, während der Fokus beibehalten wird. Ich habe das fast schon genagelt, aber die jquery next() funktioniert nicht wie erwartet, stattdessen überspringt sie zwei oder geht manchmal in zufälliger Reihenfolge.

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

arbeiten js Geige: -

https://jsfiddle.net/zpnfzevb/

Answer 1

das keydown Ereignis gebunden zu $ ​​(document) verursachte zusätzliche Schleifen bedeuten, dass die Auswahl an verschiedenen Stellen enden würde.

Das Ereignis ist jetzt an $ ('nav') gebunden und in der Unschärfefunktion nicht gebunden. Dies hat alle unerwünschten Trigger entfernt und verhält sich jetzt wie erwartet.

Finale JS unten: -

$(".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"); 
    })