Ocultar elemento al hacer clic fuera

[20113784]

Tengo un botón que muestra un elemento... quiero que se oculte al darle a ese mismo botón y también al hacer clic en cualquier sitio que este fuera de él. Como lo haría?

[Alexis88]

Un pequeño ejemplo:

Código HTML:

<button>Mostrar/Ocultar</button>
<div></div>
 

Código CSS:

div{
    width: 20rem;
    height: 15rem;
    background: black;
    display: none;
}
 

Código Javascript:

var div = document.querySelector("div"),
    button = document.querySelector("button");
 
window.addEventListener("click", function(event){
    var objetivo = event.target;
    if (objetivo != div && objetivo != button) div.style.display = "none";
}, false);
 
button.addEventListener("click", function(){
    var visible = getComputedStyle(div).display;
    div.style.display = visible == "block" ? "none" : "block";
}, false);
 

Tenemos una división y un botón. En la hoja de estilos, a la división, le aplico dimensiones, un color de fondo y la oculto. En el código JS, tomo a ambos elementos y los asigno a variables. Luego, cuando demos un clic en alguna parte de la ventana, tomamos el lugar afectado y si este no es la división ni el botón, procedemos a ocultar a la división. Por otra parte, cuando demos clic al botón, tomamos el estilo computado de la división, correspondiente a la propiedad display. Luego, si esta es igual a 'block', le asignamos 'none' a la división, caso contrario, 'block'.

DEMO

Saludos

[20113784]

Logre hacerlo antes...

pero ahora tengo un nuevo problema

este es el codigo que tengo

jquery

$(document).ready(function(){


$('.btn_mi-cuenta').click(function(e){
e.stopPropagation();
$('#conten_mi-cuenta').fadeIn();
});

$('body').click(function(e) {
if (e.target.id !== "conten_mi-cuenta") {
$('#conten_mi-cuenta').fadeOut();
};
});

});


html

<div id="conten_mi-cuenta">
<div class="in-header">
<span>Iniciar Sección</span>
</div>
<div class="transparent-in"></div>
<form class="form_iniciar-seccion">
<input type="text" class="in-campo" placeholder="Correo">
<input type="password" class="in-campo" placeholder="Clave">
<input type="submit" class="in-enviar" value="Iniciar Sección">
</form>
</div>


css

#conten_mi-cuenta{
display: none;
position: fixed;
z-index: 1000;
width: 251px;
top: 5em;
left: 19em;

}

.in-header{
background: #a8c741;
width: 100%;
padding: 10px 5px;
text-align: center;
border-radius: 2px 2px 0 0;
color: #152232;
}
.in-header span{
background: url('../img/in-arrow.png') center 33px no-repeat;
padding-top: 53px;
}

.transparent-in{
position: absolute;
width: 100%;
height: 145px;
background: rgba(218, 223, 227, 0.92);
padding: 5px;
border-radius: 0 0 2px 2px;
}

.form_iniciar-seccion{
position: absolute;
z-index: 2000;
}
.in-campo{
width: 221px;
height: 30px;
position: relative;
left: 20px;
margin-top: 10px;
padding: 2px;
color: #152232;
border:0px;
border-radius: 2px;
}

.in-enviar{
background: #152232;
border: 0px;
color: white;
margin-left: 20px;
cursor: pointer;
height: 39px;
width: 226px;
margin-top: 10px;
border-radius: 2px;
}



el problema ahora es que cuando le doy a uno de los elementos que esta adentro de "conten_mi-cuenta" se desaparece y no lo quiero asi. Quiero que al cliquear en cualquier elemento hijo no desaparezca. Solo lo haga al cliquear afuera

[Alexis88]

Toma de referencia el ejemplo que te mostré. Fíjate que hay una parte en la que tomo al elemento al que se le dio el clic, lo comparo con otros elementos y, según el resultado de dicha condición, realizo una acción. Por cierto, para hacer esto, no es necesario usar una librería, en mi ejemplo tienes una prueba de lo que digo.

Saludos

[20113784]

No se mucho de esto... no entiendo. Si pudieras hacerme un ejemplo con un recuadro y dentro un formulario, que es lo que necesito, te lo agradecería muchismo. Preferiblemente con Jquery. Pero ya sabrás tu.

[GeekGirl]

A ese código falta simplemente modificarle dos cosas. Para ocultar/mostrar en vez de usar fadeIn/fadeOut, podés usar la función fadeToggle(). En cuanto a capturar el click sobre todo el documento, hay que usar document para que funcione si el body no tiene un alto definido y está prácticamente vacío:

Código Javascript:

$(document).ready(function(){
    $('.btn_mi-cuenta').click(function(e){
        e.stopPropagation();
        $('#conten_mi-cuenta').fadeToggle();
    }); 
 
    $(document).click(function(e) {
        if (e.target.id !== "conten_mi-cuenta") {
            $('#conten_mi-cuenta').fadeOut();
        };
    }); 
});