Я работаю над функциональностью кнопки вкладки для своей формы.
Я использую плагин для настройки всех вариантов моей формы, но теперь я застрял в конфликте.
Это код, который я написал для отображения списка выпадающего меню с помощью кнопки 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
Как я могу решить эту проблему?
Ответ 1 · рейтинг 4 · Scott Murphy
Вы можете настроить обработчик щелчка и фокуса и повторно использовать одну и ту же логику для обоих.
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
Ответ 2 · рейтинг 3 · Drazen Bjelovuk
Отработка ответа 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
