Конечная функция при запуске следующего экземпляра в каждом из них

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 правильно, а вторичная навигация показывает, что n фокусируется на .parent-nav > a. Проблема заключается в том, что эта функция заканчивается при фокусировке следующего .parent-nav > a. Что бывает, я в конечном итоге со страницей, которая выглядит так, как вкладки I через:

Как убить функцию, когда я достигаю следующий экземпляр в .each()?

Answer 1

Во-первых, укажите свой обработчик события фокуса, например $('.nav-wrap a'), так что он включает в себя все навигационные ссылки. Затем в обработчике событий фокуса вы можете проверить, открыты ли какие-либо поднавы. Наконец, проверьте, является ли 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(); 
    } 
});