的 JSFIDDLE

Question

我有一个下拉列表，我想要，如果单击select标签将类“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

Answer 1

我认为“双击”的问题在于，当您在下拉列表中选择一个选项时，它仍会保持专注（浏览器行为）。这意味着您需要单击两次，而不必双击。首先，您需要单击其他位置以从中移除焦点，然后只有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 if语句，在您的情况下，您不需要检查 .active 类是否已经存在，你可以简单地删除它。

这是更新后的JSFiddle

双击（文档）而不是一个关闭选择下拉列表

的 JSFIDDLE

1 个答案: