启动每个实例中的下一个实例时的结束功能

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，并且在.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();
    }
});