javascript - 避免点击触发焦点

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