尝试通过菜单“切换”来应用键盘导航

Question

非常新应用“键盘导航”，从通过此菜单的制表符 (keyCode == 9) 开始.. 到目前为止，所有 $(.menuItem) 都显示关注第一个“制表符”按键，我无法在每个 li, ul 子菜单中制表符.. 帮助？

    <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>