使用 Tab 键进行键盘导航答案

【问题标题】：keyboard navigation with tab key使用 Tab 键进行键盘导航
【发布时间】：2017-06-11 04:59:41
【问题描述】：

我希望能够在菜单和下拉菜单中切换，一旦达到“lastDropdown”，之前的下拉菜单会变为“display:none” - 为什么“if conditional”不起作用？

这是我的 jquery 和 javascript ..

    $('li > a').keydown(function(e){

var subMenuChildren = document.getElementsByTagName("li");
var subMenu = $(this).next('ul');

for (var i = 0; i < subMenuChildren.length; i++){
  var lastDropdown = document.getElementsByClassName('lastDropdown');

  if (e.which == 9 && subMenuChildren !== lastDropdown) {
    subMenu.addClass('open');
  }
  else{
    subMenu.removeClass('open');
  }
}
});

这是我的 html ..

<!DOCTYPE html>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title>Keyboard Navigation - LRR</title>
  <link rel="stylesheet" href="/css/style.css" />
</head>
<body>
  <div class="navigation-container">
    <ul class="menu">
      <li class="menuItem"><a href="#">About Us</a>
        <ul class="sub-menu">
          <li class="dropdown">
          <a href="#">Meet The Team</a>
          </li>
          <li class="dropdown">
          <a href="#">Team Activities</a>
          </li>
          <li class="dropdown">
          <a href="#">Testimonials</a>
          </li>
          <li class="lastDropdown">
          <a href="#">Mission and Vision</a>
          </li>
        </ul>
      </li>
      <li class="menuItem"><a href="#">Resources</a>
        <ul class="sub-menu">
          <li class="dropdown">
          <a href="#">Big Island Go-Tos</a>
          </li>
          <li class="dropdown">
          <a href="#">Moving To Kona 101</a>
          </li>
          <li class="lastDropdown">
          <a href="#">Island News</a>
          </li>
        </ul>
      </li>
      <li class="menuItem"><a href="#">Search MLS</a>
        <ul class="sub-menu">
          <li class="lastDropdown">
          <a href="#">Kona Searches</a>
          </li>
        </ul>
      </li>
    </ul>
  </div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="js/menu-navigation.js" type="text/javascript" ></script>
</body>
</html>

【问题讨论】：

标签： jquery navigation keyboard keycode nodelist

【解决方案1】：

我首先要说的是，我不会回答您的具体问题，因为它没有教育社区，也没有被其他用户复制。

您应该做的是使您的元素能够使用"tabindex=0" 属性进行导航。

这将启用使用 'tab' 键进行导航，并且您可以捕捉元素何时激活了“:focus”来管理功能。

例子：

<div tabindex="0">reachable</div>
<a href="#" tabindex="-1">Tab key cannot reach here!</a>

【讨论】：