Javascript 避免点击触发焦点输出

我正在处理表单的选项卡按钮功能

我正在使用一个插件来定制我表单的所有选择，但现在我陷入了冲突

这是我编写的代码，用于使用屏幕上的

选项卡

按钮显示下拉菜单列表

$styledSelect.focus(function(e) {
  var dropdown = $(this).next('ul');
  dropdown.show();
});

$styledSelect.focusout(function(e) {
  var dropdown = $(this).next('ul');
  dropdown.hide();
});

问题是，任何单击事件都会触发focusout，因此我无法真正选择select标记的任何选项，因为下拉列表首先被隐藏

你可以看到这里的问题

---

如何解决此问题？

关闭Burntforest的答案（说明在弹出选项卡时下拉列表未关闭）：

---

您可以设置单击和聚焦处理程序，并对这两个处理程序重复使用相同的逻辑

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);

---

更新的代码笔：

感谢您的回答，单击下拉列表后，是否还可以将焦点放在选择标记上？当您从上一个下拉列表中退出选项卡时，此更新将关闭下拉列表。您的更改（添加回focusout）似乎重新引入了原始错误。我已经用一个变通方法更新了我的答案。

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);