How to make a div close when clicked off it?

Navigation
2
  

It is possible to make if a person clicks out of a div that contains a flag it automatically closes, but if he clicks inside the div of the flags nothing happens?

NOTE: Only if you click outside the div will it 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><divid="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

    
asked by anonymous 21.12.2014 / 04:41

1 answer

4
___ erkimt ___ How to make a div close when clicked off it? ______ qstntxt ___
  

It is possible to make if a person clicks out of a .mouseup() that contains a flag it automatically closes, but if he clicks inside the <div/> of the flags nothing happens?

NOTE: Only if you click outside the %code% will it close. 

$(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><divid="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

    
______ ___ azszpr44729

For you close the element when a click off of it, you have to be aware of a few things:

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

In view of this, you may be listening to the clicks that occur on the page making use of the method %code% and so trigger a check and close% as_with% if applicable:

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><divid="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>
    
___
21.12.2014 / 04:53
Reset variable IupLua - Position component