How do I make a <div> close when it’s clicked off?

Question

It is possible to make it if the person clicks off a div which contains flags it automatically closes, but if it clicks inside the div of the flags nothing happens?

NOTE: Only if you click outside the div that she will close.

$('#global').on("click", function() {
    $('#paises').slideToggle(300);
});

#paises{
    display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="global">Tens bandeiras?</div>
<div id="paises">Tenho, bué da bandeiras, mas é assim, não sei onde meti os icons e então acabei por escrever um texto muito longo a dar conta que não sabia dos icons e nem sei se todos estão a ler isto até ao fim? Tu estás? É pá! Bora lá bater um papo...</div>

Example in Jsfiddle

Answer 1

To close the element when a click occurs outside of it, you have to be aware of some things:

• Click was outside the element;
• Click was not on the button that controls the element;
• Click was outside the element and the element is open.

Considering this, we can be listening to the clicks that occur on the page using the method .mouseup() and thus trigger a check and close the <div/> if applicable:

Also in the Jsfiddle.

$(document).mouseup(function (e) {
    var $div = $("#paises"),
        $btn = $("#global");

    // se o alvo do clique não é a DIV ou um filho da DIV
    if (!$div.is(e.target) && $div.has(e.target).length === 0) {

        // se o alvo não é o botão que abre/fecha a DIV
        if (!$btn.is(e.target) && $btn.has(e.target).length === 0) {

            // se a DIV está aberta
            if ($div.is(':visible')) {
                $div.slideToggle();
            }
        }
    }
});

$('#global').on("click", function() {
    $('#paises').slideToggle();
});

#paises{
    display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="global">Tens bandeiras?</div>
<div id="paises">Tenho, bué da bandeiras, mas é assim, não sei onde meti os icons e então acabei por escrever um texto muito longo a dar conta que não sabia dos icons e nem sei se todos estão a ler isto até ao fim? Tu estás? É pá! Bora lá bater um papo...</div>