2

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');
4

2 回答 2

0

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');
});
于 2013-02-22T02:49:28.543 回答
0 
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. 您可以想象为事件处理程序命名并自己手动绑定和取消绑定它，但让这个处理程序一直运行可能更容易。很可能你会想要添加到它，因为你在你的 UI 中想出了其他“单击其他任何地方以取消”类型的区域。

于 2013-02-22T01:05:25.430 回答