結束功能，當每個開始下一個實例

Question

一個小bg信息：我正在努力使一個網站100％通過鍵盤/選項卡導航，我堅持讓下拉菜單打開時，通過選項卡。

這是我到目前爲止有：

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

而對於jQuery的：

$("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正確，並且輔助導航顯示whe重點關注.parent-nav > a。問題在於，當下一個.parent-nav > a聚焦時，該功能就會結束。會發生什麼事，是我結束了一個頁面，看起來像這樣，我通過TAB：

如何殺功能，當我到達的.each()的下一個實例？

Answer 1

首先，定位您的焦點事件處理程序，如$('.nav-wrap a')，以便它包含全部導航鏈接。然後，在您的焦點事件處理程序中，您可以檢查是否有任何subnav當前處於打開狀態。最後，檢查你目前所在的subnav是否是打開的 - 如果不是，則關閉另一個subnav，然後打開你當前所在的那個。

另外，你不要這裏需要使用.each()，因爲您可以直接將事件處理程序附加到jQuery集合中。最後，更喜歡.on('focus'...)而不是`.focus（...）(here's why)。所以最終結果看起來像這樣：

$('.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(); 
    } 
});