12

我一直在研究一个下拉/弹出菜单，它运行良好，但有一个例外；当您单击链接（或按回车键）打开菜单时，焦点应该设置为下一个可以接收焦点的元素。因此在本例中，单击“菜单 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

任何帮助深表感谢。

4

4 回答 4

12

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

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

于 2017-01-29T02:00:58.580 回答
7

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

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

于 2019-07-26T19:01:36.640 回答
3

您需要的是找到第一个可聚焦的元素：

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

没有.first(),focus()应用于所有匹配的元素:focusable，最终聚焦最后一个元素。

于 2017-01-29T02:05:57.880 回答
2

Drews answer的一点改进，因为输入类型 hidden 是不可聚焦的，应该被排除在外。所以用这个替换“.find(':focusable')”：

.find('button, a, input:not([type="hidden"]), select, textarea, [tabindex]:not([tabindex="-1"])')
于 2021-05-27T11:30:53.763 回答