탭 키가있는 키보드 탐색

메뉴 및 드롭 다운을 통해 탭을 만들 수 있고 'lastDropdown'에 도달하면 이전 드롭 다운에 'display : none'이 표시됩니다 - '조건부'가 작동하지 않는 이유는 무엇입니까?탭 키가있는 키보드 탐색

여기

<!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>

출처

2017-01-25 gmatsushima

나는 그대로 내가 특정 질문에 대한 답변을하지 않을 것이라는 말함으로써 시작됩니다 .. 내 JQuery와 및 자바 스크립트 .. 여기

$('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의의 커뮤니티를 교육하지 않고 다른 사용자가 재현하지 않아야합니다.

당신이해야 할 일은 요소가 "tabindex=0" 속성을 사용하여 탐색 할 수있게하는 것입니다.

이렇게하면 '탭'키를 사용하여 탐색하고 기능을 관리하기 위해 요소에 ": 포커스"가 활성화되었을 때이를 파악할 수 있습니다.

예 :

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

출처

2017-11-03 18:52:37

답변

관련 문제