Question

我使用下一个JS来添加类，方法是单击元素并通过单击元素外部来删除它：

$(function() {
  $('.main').mousedown(function() {
    return $(this).find('.drop').addClass("dropped", 300);
  });
  $('.main').click(function(event) {
    return event.stopPropagation();
  });
  $(document).click(function() {
    return $('.drop').removeClass("dropped");
  });

});

html结构是：

<div class="main">
  <div class="drop">Click Here</div>
</div>
<div class="main">
  <div class="drop">Click Here</div>
</div>
<div class="main">
  <div class="drop">Click Here</div>
</div>
<div class="main">
  <div class="drop">Click Here</div>
</div>

这是JSfiddle live example

正如您所见，我通过点击相同元素使用event.stopPropagation();来阻止removeClass。但是它阻止了所有main div的点击。如何仅阻止点击的main div，意味着如果点击了所有main div，然后我点击其中一些div，则接受其余的.removeClass("dropped");排除点击后的。{ / p>

Answer 1

尝试

$(function () {
    $('.main').mousedown(function () {
        return $(this).find('.drop').addClass("dropped", 300);
    });
    $(document).click(function (e) {
        return $('.drop.dropped').not($(e.target).closest('.main').find('.drop')).removeClass("dropped");
    });
});

演示：Fiddle

Answer 2

不确定它是否符合您的需要，但请尝试：

DEMO jsFiddle

$('.main').attr('tabindex', -1).css('outline', 'none');

$(document).on('focus blur', '.main', function () {
    $(this).find('.drop').toggleClass('dropped');
});

防止脚本运行

2 个答案: