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

Question

i have simple dropdown, and i need to hide (fadeout) it by clicking on the document

this is my jquery code:

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

Remove "e.preventDefault" which has no use here, add "return false" to prevent event propagation to its parent, use "document" instead of "body" as the selector for fading the dropdownlist upon clicking anywhere on the document.

$(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();
    });
});