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