当每个实例中的下一个实例启动时结束函数

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，并且当.parent-nav > a 获得焦点时，二级导航会显示。问题是当关注下一个.parent-nav > a 时该函数结束。会发生什么，当我浏览时，我最终会得到一个看起来像这样的页面：

当我到达.each() 中的下一个实例时，如何终止该函数？

Answer 1

首先，定位您的焦点事件处理程序，例如$('.nav-wrap a')，使其包含所有导航链接。然后，在您的焦点事件处理程序中，您可以检查当前是否打开了任何子导航。最后，检查您当前所在的子导航是否是打开的 - 如果不是，则关闭另一个子导航，然后打开您当前所在的子导航。

此外，您不需要在此处使用.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();
    }
});