Question

应用＆＃39;键盘导航＆＃39;非常新，通过此菜单从tab键（keyCode == 9）开始..到目前为止，所有$（。menuItem）显示的重点是第一个＆＃39;标签＆＃39; keydown，我无法通过每个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>

尝试通过“标签”来应用键盘导航。通过菜单

1 个答案: