Question

我正在尝试从点击的元素中删除active的类，此时页面上的任何内容（单击元素及其子元素除外）。

我知道我没有正确使用not()选择器，但这是我最好的猜测。我也不知道如何添加关于孩子的部分（？）

$(document).ready(function () {
    $('#content_container').on('click', '.wrapper-dropdown-1', function () {
        //close all open dropdowns
        $('.wrapper-dropdown-1').not(this).removeClass('active');


        //close dropdown if anywhere on the body is clicked
        $('body').on('click', ('#content_container').not(this), function () {
            $(this).removeClass('active');
        }); 
        //Uncaught TypeError: Object #content_container has no method 'not'


        var dropdown = $(this);
        dropdown.toggleClass('active');
    });
});

//Uncaught TypeError: Object #content_container has no method 'not'

我无法理解它与第四行中成功实施的区别。

$('.wrapper-dropdown-1').not(this).removeClass('active');

Answer 1

var dropdown;

$('body').on('click', function () {
    if ($(e.target).closest(dropdown).length) return;
    $('.wrapper-dropdown-1').removeClass('active');
}); 

$('#content_container').on('click', '.wrapper-dropdown-1', function () {
    $('.wrapper-dropdown-1').not(this).removeClass('active');
    dropdown = $(this).toggleClass('active');
});

请注意使用$(e.target)（原始事件元素）而不是$(this)（始终为body）。

必须采用这种方式的原因是，如果您尝试在:not事件过滤器中使用on样式选择器，则可以防止事件触发该区域内的元素但不会触发那个区域的父母。具有not的事件处理程序不会停止事件的传播，只会包含在选择中。（在捕获区域内停止事件传播是另一种方法，但随着您的应用变得更加复杂，维护成为一项挑战，因此我不推荐它。）

您还在另一个事件处理程序中声明了一个事件处理程序。这有其他问题，例如每次他们点击该区域时，您会在body上获得多个处理程序。你可以设想命名事件处理程序并手动绑定和取消绑定它，但是让这个处理程序一直运行可能更容易。你想要在你的用户界面中提出其他“点击其他任何地方取消”类型区域时，你可能想要添加它。

Answer 2

jsBin

$('#content_container').on('click', '.wrapper-dropdown-1', function(evt){
  $(this).toggleClass('active');
});

$('body').click(function(evt){
  var el = $(evt.target).is('.wrapper-dropdown-1') ? evt.target : null;
  $('#content_container .wrapper-dropdown-1').not(el).removeClass('active');
});

jquery点击每个元素但是

2 个答案: