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

避免点击触发焦点

2 个答案: