双击从(文档)而不是一次关闭选择下拉菜单

Double clicks from (document) instead of one to close select dropdown

本文关键字：一次 选择 下拉菜单 文档 双击      更新时间：2023-09-26

我有一个下拉列表，我想，如果点击选择标签添加类'active'到span标签，如果再次点击删除它。但我也想，如果我点击文档页面，它应该删除类'active'，如果它添加到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

我认为"双击"的问题是，当你在下拉菜单中选择一个选项时，它仍然集中(浏览器行为)。这意味着你需要点击两次，而不一定是双击。首先，你需要点击其他地方来移除焦点，只有这样body元素才能听到你的点击。

不知道你在做什么，也许这不是你最好的选择。您可以考虑使用DIV或UL LI元素创建自己的下拉列表。然而，如果你想修补浏览器的行为，你可以强制它模糊(不聚焦)。您需要将触发器更改为更改而不是单击，否则在您进行选择之前会使其模糊。

 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语句，在您的情况下，您不需要检查是否。活动类已经存在，您可以简单地删除它。

这是更新后的JSFiddle

相关文章：