2013-02-22 191 views
2

我试图删除点击元素和它的子元素之外的页面上的任何内容时点击元素active类。jquery点击每一个元素,但

我知道我没有正确使用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'); 
+2

托马斯,仅有1个代表点! – 75inchpianist 2013-02-22 00:20:51

+0

@ 75inchpianist不再有;)我不得不把它全部搞乱 – 2013-02-22 00:22:10

+0

你不需要在选择器之前告诉它的jquery – 75inchpianist 2013-02-22 00:22:15

回答

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)。

它是这个样子的原因是,如果你试图在on事件过滤器使用:not样式选择,你防止事件触发该区域中的元素,却没有考虑区域的父母。具有not的事件处理程序不会停止事件的传播,只会包含在选择中。 (停止捕获区域内的事件传播是另一种方法,但是随着应用程序变得越来越复杂,所以我不推荐它。)

您还声明了一个事件处理程序在另一个事件处理器中这还有其他问题,比如每次点击该区域时,您都会在body上获得多个处理程序。您可以想象地命名事件处理程序并手动绑定和解除绑定,但只是让该处理程序始终运行可能更容易。当你在前进的UI中想出其他“点击取消”类型区域时,你会想要添加它。

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