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

Question

一点背景信息：我正在努力让网站 100% 可通过 keyboard/tabs 导航，并且我一直坚持让下拉菜单在选项卡浏览时打开。

这是我目前的情况：

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

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

End function when next instance in each is started

each

jquery

focus

function

nav