尝试通过 'tabbing' 通过菜单应用键盘导航

Question

对应用 'keyboard navigation' 非常陌生，从通过此菜单的制表符 (keyCode == 9) 开始......到目前为止，所有 $(.menuItem) 都显示第一个 'tab' keydown , 我无法在每个 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>

尝试通过 'tabbing' 通过菜单应用键盘导航

Trying to apply keyboard navigation by 'tabbing' through menu

jquery

focus

keyboard-events

keycode