それぞれの次のインスタンスが起動されたときの終了機能

Question

ちょっとした情報：私はキーボード/タブでウェブサイトを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を表示していますn .parent-nav > aにフォーカスが当てられています。問題は、次の.parent-nav > aがフォーカスされているときに、その関数が終了するようになっていることです。私は.each()で次のインスタンスに達したときに、私は機能を殺すにはどうすればよい

：何が起こるか、私はを通じてI]タブとして、次のようになりますページで終わるのですか？

Answer 1

まず、$('.nav-wrap a')のようなフォーカスイベントハンドラをターゲットにして、すべてののリンクを含むようにします。次に、フォーカスイベントハンドラで、現在開いているサブナビがあるかどうかを確認できます。最後に、現在開いているサブナブが開いているかどうかを確認します。そうでない場合は、他のサブナビを閉じて、現在開いているサブナビを開きます。

また、ここでは.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(); 
    } 
});