最初のフォーカス可能な要素にフォーカスを設定する方法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();は、フォーカス可能な属性を持つすべての要素を探し、最後のものを返します。あなたがしたいことは、それを最初のものに限定することです。 find the first focusable elementにあなたはあなたが必要なものこの

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

Answer 2

ようにしたい、実際のインデックスを指定します.EQ（）関数を使用することができます：

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

.first()がなければ、focus()は、すべてに適用されます:focusableと一致する要素は、最終的に最後の要素にフォーカスを合わせて最終的に終了します。