Как установить фокус на первый фокусируемый элемент jQuery?

Question

Я работал над выпадающим / всплывающим меню, и у меня оно отлично работает, за одним исключением; Когда вы нажимаете на ссылку (или нажимаете клавишу ввода), чтобы открыть меню, фокус должен быть установлен на следующий элемент, который может получить фокус. Таким образом, в этом примере, нажав на ссылку "Меню 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"])')

Answer 3

Вам нужно найти первый фокусируемый элемент:

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

Без .first(), focus() применяется ко всем соответствующим элементам :focusable, который в конечном итоге фокусируется на последнем элементе.

Answer 4

Небольшое улучшение для ответа Дрюса, поскольку скрытый тип ввода не является фокусируемым и должен быть исключен. Поэтому замените ".find(':focusable')" следующим:

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