使用 Tab 键进行键盘导航

我希望能够通过菜单和下拉菜单进行选项卡，一旦达到"lastDropdown"，对于之前的下拉列表到"display：none" - 为什么"如果有条件"不起作用？

这是我的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>

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

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

这将允许使用"tab"键进行导航，您可以捕获元素何时激活了"：focus"以管理功能。

例：

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

相关内容

最新更新

热门标签：