如何将焦点放在第一个可聚焦元素jQuery上？

Question

我一直在下拉菜单/弹出菜单上工作，除了一个例外，它工作得很好。当您单击链接（或按Enter键）以打开菜单时，应该将焦点设置为可以接收焦点的下一个元素。因此，在此示例中，单击“菜单1”链接，应展开菜单，并将焦点设置在“测试1”上。但是由于某种原因，它跳转到最后一个可聚焦元素（测试3）：

<ul class="axxs-menu">
  <li><a class="trigger">Menu 1</a>
    <ul class="content">
      <li><a href="#1">test 1</a></li>
      <li><a href="#2">test 2</a></li>
      <li><a href="#3">test 3</a></li>
    </ul>
  </li>
</ul>

这是相关的js：

jQuery.extend(jQuery.expr[':'], {
    focusable: function(el, index, selector){
    return $(el).is('a, button, :input, [tabindex]');
}
});

function openPopmenu(element) { 
$(element).removeClass('trigger-inactive').addClass('trigger-active').attr("aria-expanded", "true").attr("aria-selected", "true");
 $(element).next('.collapsed').removeClass('collapsed').addClass('expanded').show().attr("aria-hidden", "false");
$(element).next().find(':focusable').focus();
}

这是一支代码笔：

http://codepen.io/tactics/pen/EZbGBY

任何帮助深表感谢。

Answer 1

该语句$(element).next().find(':focusable').focus();将查找具有focusable属性的所有元素，并返回最后一个元素。您想要做的就是将其限制为特定的一个，这是第一个。您可以使用.eq（）函数指定所需的实际索引，如下所示

$(element).next().find(':focusable').eq(0).focus();

Answer 2

:focusable 伪选择器仅适用于 jquery-ui。如果您只使用 jquery，则将 '.find(':focusable') 替换为以下内容：

.find('button, a, input, select, textarea, [tabindex]:not([tabindex="-1"])')