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

我一直在研究一个下拉菜单/弹出式菜单，并且我工作得很好，只有一个例外;当你点击链接（或点击回车键）打开菜单时，应该将焦点设置为可以获得焦点的下一个元素。因此，在本例中，单击“菜单1”链接，应该展开菜单，并将焦点设置为“测试1”。但由于某些原因，它跳到最后一个聚焦元素（测试3）代替：如何将焦点设置在第一个可聚焦元素jQuery上？

<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

任何帮助，非常感谢。

来源

2017-01-29 DeanH

此语句$(element).next().find(':focusable').focus();将查找具有可聚焦属性的所有元素并返回最后一个元素。你想要做的是限制它是第一个特定的。您可以使用.EQ（）函数指定的实际索引你想这样

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

来源

2017-01-29 02:00:58

完美。谢谢！ – DeanH

你需要的是find the first focusable element：

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

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

来源

2017-01-29 02:05:57

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

回答

相关问题