각각의 다음 인스턴스가 시작될 때의 종료 기능

Question

작은 bg 정보 : 키보드/탭으로 웹 사이트를 100 % 탐색 할 수 있도록 노력하고 있습니다. 탭을 통과 할 때 드롭 다운 메뉴가 열리도록 노력하고 있습니다. 여기

는 지금까지이 작업은 다음과 같습니다

$("a").each(function (i) { $(this).attr('tabindex', i + 1); }); 

$('.parent-nav > a').each(function(){ 
    $(this).focus(function() { 
     $(this).parent().children(".nav-secondary-pg").show(); 
    }); 
}); 

지금, 내 모든 링크가 tabindex을 받고 :

그리고 jQuery를위한

<ul class="nav-wrap"> 

    <li class="nav-primary-pg"><a class="selected" href="/">Home</a> 

    </li> 

    <li class="nav-primary-pg parent-nav"><a href="/about-us/">About Us<b></b></a> 
     <ul class="nav-secondary-pg"> 
     <li class="back"><a href="#"></a></li> 
     <li class=""><a href="/about-us/knowledge-expertise">Knowledge &amp; Expertise</a> 

     </li> 


     <li class=""><a href="/why-bank/testimonials">Testimonials</a> 

     </li> 
     </ul> 

    </li> 

    <li class="nav-primary-pg last-nav-item parent-nav"><a href="/contact-us/">Contact Us<b></b></a> 
     <ul class="nav-secondary-pg"> 
     <li class="back"><a href="#"></a></li> 


     <li class=""><a href="/contact-us/application">Apply Now</a> 

     </li> 
     <li class=""><a href="/contact-us/quick-quote">Quick Quote</a> 

     </li> 
     <li class=""><a href="/contact-us/subscribe">Subscribe</a> 
     </li> 
     </ul> 

    </li> 

    </ul> 

</section> 

정확하게, 그리고 보조 항법은 whe를 보여주고있다. n .parent-nav > a에 중점을 둡니다. 다음 .parent-nav > a에 포커스가있을 때 문제가 끝나는 것입니다. 나는 .each()의 다음 인스턴스를 도달 할 때이 기능을 죽일 어떻게

: 무슨 일이 난을 통해 I 탭으로 다음과 같습니다 페이지로 끝인가?

Answer 1

먼저 $('.nav-wrap a')과 같은 포커스 이벤트 핸들러를 타겟팅하여 모두 nav 링크가 포함되도록하십시오. 그런 다음 포커스 이벤트 핸들러에서 현재 열려있는 서브 그룹이 있는지 확인할 수 있습니다. 마지막으로, 현재있는 서브 넷이 열려 있는지 확인합니다. 그렇지 않은 경우 다른 서브 네트워크를 닫고 현재 열려있는 서브넷을 엽니 다.

또한 여기서 .each()을 사용해야합니다. jQuery 컬렉션에 이벤트 핸들러를 직접 연결할 수 있기 때문입니다. 마지막으로`.focus (...) (here's why) 대신 .on('focus'...)을 사용하십시오. 따라서 최종 결과는 다음과 유사합니다.

$('.nav-wrap a').on('focus', function() { 
    // find open sub nav (if it exists) 
    var $openSubnav = $('.nav-wrap .nav-secondary-pg:visible'); 

    // find the subnav that you're currently in 
    var $thisSubnav = $(this).closest('.parent-nav').children('.nav-secondary-pg'); 

    // if the subnav you're in is not already open, 
    // close other subnav and open this one 
    if (!$thisSubnav.is($openSubnav)) { 
     $openSubnav.hide(); 
     $thisSubnav.show(); 
    } 
});