jquery - 在 div 中选择复选框时，它会返回动画

Question

$('.selector').click(function() {
    $(this).children('.drop_down_label').animate({ height: 'toggle' });
 });

我有一个包含复选框的 div '.drop_down_label'，当我为 div 设置动画时，它可以正常工作

但如果我选中某个复选框，它就会动画回来。

我怎样才能避免这种情况？

我的目标是单击->动画“.drop_down_label”->选中一些复选框->然后单击页面中的任何元素

导致 '.drop_down_label' 返回动画。

Answer 1

HTML 事件的工作方式是它们冒泡。单击 div 内的复选框也会触发 div 的单击事件。

将单击处理程序附加到执行以下操作的复选框：

$("input[type=checkbox]", ".selector").click(function(e){
    e.stopPropagation();
});

对于单击页面上任何元素的后半部分（尽管我认为您的意思是div之外的任何元素），这应该可以工作（未经测试）。.selector

$('.selector').click(function() {
    $(this).children('.drop_down_label').animate({ height: 'toggle' });
    $(document).one('click', function(e) {
        $(this).children('.drop_down_label').animate({ height: 'toggle' });
    })
})