Пытаясь применить клавиатурную навигацию по «tabbing» через меню

Question

Очень новое применение «клавиатурной навигации», начиная с tabbing (keyCode == 9) через это меню. До сих пор все $ (. MenuItem) s отображали фокус при первом нажатии «вкладка» я не могу выполнить вкладку в каждое подменю li, ul .. help?

<div class="navigation-container"> 
    <ul class="menu" tabindex="0"> 
     <li class="menuItem" tabindex="-1">About Us 
     <ul class="sub-menu" tabindex="-1"> 
      <li tabindex="-1"> 
      <p>Meet The Team</p> 
      </li> 
      <li tabindex="-1"> 
      <p>Testimonials</p> 
      </li> 
      <li tabindex="-1"> 
      <p>Mission and Vision</p> 
      </li> 
     </ul> 
     </li> 
     <li class="menuItem">Resources 
     <ul class="sub-menu"> 
      <li> 
      <p>Big Island Go-Tos</p> 
      </li> 
      <li> 
      <p>Moving To Kona 101</p> 
      </li> 
      <li> 
      <p>Island News</p> 
      </li> 
     </ul> 
     </li> 
     <li class="menuItem">Search MLS 
     <ul class="sub-menu"> 
      <li> 
      <p>Kona Searches</p> 
      </li> 
     </ul> 
     </li> 
    </ul> 
    </div> 

$('.menuItem').keydown(function(e){ 
    if (e.which == 9) { 
    $('li.menuItem').focus(); 
    console.log($('menuItem')); 
    } 
}); 

Answer 1

li элементы не получить фокус, так что вы могли бы сделать, это сделать текст внутри a, потому что якоря могут получить фокус. Ниже будет способ сделать это

$('li>a').keydown(function(e) { 
 
    if (e.which == 9) { 
 
    //Get the submenu 
 
    var subMenu = $(this).next('ul'); 
 
    subMenu.addClass('open'); 
 
    //Check if you're on the last subchild and close the menu 
 
    if ($(this).parent('li').is(':last-child:not(".menu>li>a")')) { 
 
     $(this).parent('li').parent('.open').removeClass('open') 
 
    } 
 
    } 
 
});

.sub-menu { 
 
    display: none; 
 
} 
 
.sub-menu.open { 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<div class="navigation-container"> 
 
    <ul class="menu"> 
 
     <li class="menuItem"> 
 
     <a href="#">About Us</a> 
 
     <ul class="sub-menu"> 
 
      <li> 
 
      <a href="#">Meet The Team</a> 
 
      </li> 
 
      <li> 
 
      <a href="#">Testimonials</a> 
 
      </li> 
 
      <li> 
 
      <a href="#">Mission and Vision</a> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
     <li class="menuItem"> 
 
     <a href="#">Resources</a> 
 
     <ul class="sub-menu"> 
 
      <li> 
 
      <a href="#">Big Island Go-Tos</a> 
 
      </li> 
 
      <li> 
 
      <a href="#">Moving To Kona 101</a> 
 
      </li> 
 
      <li> 
 
      <a href="#">Island News</a> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
     <li class="menuItem"> 
 
     <a href="#">Search MLS</a> 
 
     <ul class="sub-menu"> 
 
      <li> 
 
      <a href="#">Kona Searches</a> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
    </ul> 
 
    </div>