Question

我希望能够通过菜单和下拉列表进行制表，并且可以在最后一次下载后删除＆＃39;已到达，因为之前的下拉菜单显示：无＆＃39; - 为什么没有条件＆＃39;工作

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

Answer 1

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

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

这样就可以使用＆＃39;标签＆＃39;导航的关键，你可以抓住元素何时具有＆＃34;：focus＆＃34;已激活以管理功能。

示例：

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

键盘导航与Tab键

1 个答案: