点击背景如何关闭弹出窗口

Question

我有简单的下拉菜单，我需要通过点击文档隐藏（淡出）它

这是我的jquery代码：

var expandCheckbox = $('.filterShow'),
    formCheckbox = $('.checkboxWrap');
expandCheckbox.click(function(e) {
    e.preventDefault();

    if ($(this).hasClass('active')) {
        $(this).removeClass('active');
        $(formCheckbox).fadeOut(200);
    } else {
        $(this).addClass('active');
        $(formCheckbox).fadeIn(100);
    }
});

$('body').not('.filterShow, .checkboxWrap').click(function() {
    $(formCheckbox).fadeOut(100);
});

SEE JSFIDDLE

Answer 1

删除＆＃34; e.preventDefault＆＃34;这里没用，添加＆＃34;返回false＆＃34;为防止事件传播到其父级，请使用＆＃34; document＆＃34;而不是＆＃34; body＆＃34;作为单击文档上任何位置时淡入下拉列表的选择器。

$(document).ready(function(){
    expandCheckbox = $('.filterShow'),
    formCheckbox = $('.checkboxWrap');
    expandCheckbox.click(function (e) {

        if ($(this).hasClass('active')) {
            $(this).removeClass('active');
            formCheckbox.fadeOut(200);
        } else {
            $(this).addClass('active');
            formCheckbox.fadeIn(100);
        }
        return false;
    });

    $(document).click(function (e) {
        if (expandCheckbox.hasClass('active')) {
            expandCheckbox.removeClass('active');
            formCheckbox.fadeOut(200);
        }
        return false;
    });

    formCheckbox.find('input:checkbox').click(function (e) {
        e.stopPropagation();
    });
});