jQuery的外部点击-$（此）停止工作

Question

I wanted to ask, where i have error, it piece of code.

Button class show / hide filter element, and this is ok. But i want to archive "click outside effect" - close filter on some body element click, not filter itself.

$('.button').on('click',function() {
        var filters = $('#filters');
        if (filters.is(':hidden')) {
            filters.show();
        } else {
            filters.hide();
        }

        // Now i want to close filter, on click on body element, not filter itself.

        // Now, this code below, closes filter, on click on body element, but now .button is not closing filter. So code below is not working...

        $(document).mouseup(function (e) {
            var container = filters;
            if (!container.is(e.target) && container.has(e.target).length === 0)  {
                container.hide();
            }
        });
    });

But now, $(document).mouseup(function (e) - it prevents .button, from filters close....

What's wrong ?

Thanks for advice.

Answer 1

Have a look at this:

https://jsfiddle.net/t1nxwvy2/3/

You can use the following to see if the click was inside the button or not:

$(document).mouseup(function (e) {
    var container = $('.button');

    if (!container.is(e.target) && (container.has(e.target).length === 0)) {
        if (!filters.is(e.target) && (filters.has(e.target).length === 0)) {
            filters.hide();
        }
    } else filters.toggle();
});