从（文档）双击而不是单击以关闭选择下拉菜单

Question

我有一个下拉列表，如果单击选择标记以将“活动”类添加到跨度标记并在再次单击时将其删除，我想要。但我也希望，如果我点击文档页面，如果它添加到 span 标签，它应该删除类“活动”。它可以工作..但我应该从文档中双击而不是单击以删除活动类.. 我确信有一个更短更好的代码来做这个技巧，但无论如何它的工作方式有点像:) 任何帮助将不胜感激

这里是基本的html：

<select class="qty">
 <option>1</option>
 <option>2</option>
</select>
<span class="arrow"></span>

jQuery :

jQuery(document).ready(function($) { 

 var arrow = $('.arrow');

 $(".qty").on('click', function(e) {
  e.stopPropagation();
  if(arrow.hasClass('active')) {
     arrow.removeClass('active');
  } 
  else {
     arrow.addClass('active'); 
  }
 });

 $(document).on('click', function(e) {
   e.stopPropagation();
   if(arrow.hasClass('active')) {
     arrow.removeClass('active');
   }
   else { 
     return false;
   }
 });
});

JSFIDDLE

Answer 1

我认为“双击”的问题在于，当您在下拉列表中选择一个选项时，它仍然保持焦点（浏览器行为）。这意味着您需要单击两次，而不一定要双击。首先你需要点击其他地方来移除焦点，然后body元素才能听到你的点击。

不确定您要做什么，也许这不是您的最佳选择。您可以考虑使用 DIV 或 UL LI 元素制作自己的下拉菜单。但是，如果您确实想修补浏览器行为，则可以强制它模糊（不聚焦）。您需要将触发器更改为 change 而不是 click，否则在您做出选择之前它会模糊它。

 jQuery(document).ready(function($) { 

 var arrow = $('.arrow');

 $(".qty").on("change", function(e) {
  e.stopPropagation();
  arrow.toggleClass("active");
  $(this).blur();
 });

 $(document).on('click', function(e) {
   arrow.removeClass('active');
 });
});

另外，请注意，您可以使用 .toggleClass 代替 if 语句，在您的情况下，您不需要检查 .active 类是否已经存在，您可以简单地删除它。

这是更新后的JSFiddle