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

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

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

Это код, который я написал для отображения списка выпадающего меню с помощью кнопки 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

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


javascript focus click jquery jquery-focusout
person Koala7    schedule 12.05.2014    source источник

Ответы (2)


arrow_upward
4
arrow_downward

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

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

person Scott Murphy    schedule 12.05.2014
comment
Спасибо за ответ, есть ли возможность также удерживать внимание на этом теге выбора, когда я нажимаю на раскрывающийся список? - person Koala7; 12.05.2014
comment
codepen.io/anon/pen/kcpqd Это обновление закрывает раскрывающийся список при выходе из вкладки последнее раскрывающееся меню - person Scott Murphy; 13.05.2014
comment
Ваше изменение (добавление фокуса), казалось, вновь ввело исходную ошибку. Я обновил свой ответ обходным путем. - person Drazen Bjelovuk; 13.05.2014

arrow_upward
3
arrow_downward

Отработка ответа 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

person Drazen Bjelovuk    schedule 12.05.2014