如何將焦點設置在第一個可聚焦元素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上？

回答

相關問題