Избегайте фокусировки при нажатии

Question

Я работаю над функциональностью кнопки вкладки для моей формы.

Я использую плагин для настройки всех вариантов моей формы, но теперь я застрял в конфликте.

Это код, который я написал для отображения моего выпадающего списка меню, используя tab кнопка на выбор

$styledSelect.focus(function(e) {
  var dropdown = $(this).next('ul');
  dropdown.show();
});

$styledSelect.focusout(function(e) {
  var dropdown = $(this).next('ul');
  dropdown.hide();
});

Проблема заключается в том, что любое событие щелчка вызывает фокусировку, поэтому я не могу выбрать какую-либо опцию из моего тега выбора, потому что выпадающий список сначала скрыт.

Вы можете увидеть проблему здесь http://codepen.io/Mannaio/pen/tLaup

Как я могу решить эту проблему?

Answer 1

Вы можете настроить обработчик щелчка и фокуса и повторно использовать одну и ту же логику для обоих.

function setFocus(e) {
  e.stopPropagation();
  $('div.select-styled.active').each(function() {
    $(this).removeClass('active').next('ul.select-options').hide();
  });
  $(this).toggleClass('active').next('ul.select-options').toggle();
};

$styledSelect.click(setFocus);

$styledSelect.focus(setFocus);

Обновленный CodePen: http://codepen.io/anon/pen/kcpqd

Answer 2

Отработка ответа Burntforest (учетные записи не раскрываются при закрытии вкладок):

function getFocus(e) {
    e.stopPropagation();
    hideAllLists();
    $(this).toggleClass('active').next('ul.select-options').toggle();
};

function hideAllLists() {
    $('div.select-styled.active').removeClass('active')
                                 .next('ul.select-options').hide();
}

$styledSelect.click(getFocus); 
$styledSelect.focus(getFocus);

$(document).keydown(function(e) {
   if (e.keyCode === 9)
       hideAllLists();
});

http://codepen.io/anon/pen/BqEkz