mostrar - jQuery ocultar elemento cuando se hace clic en cualquier lugar de la página
mostrar y ocultar div con jquery ejemplos (17)
Me gustaría saber si esta es la forma correcta de ocultar elementos visibles cuando se hace clic en algún lugar de la página.
$(document).click(function (event) {
$(''#myDIV:visible'').hide();
});
El elemento (div, span, etc.) no debería desaparecer cuando el evento click ocurre dentro de los límites del elemento.
A partir de jQuery 1.7, hay una nueva forma de manejar eventos. Pensé que respondería aquí solo para demostrar cómo podría hacer esto de la "nueva" manera. Si no lo has hecho, te recomiendo que leas los documentos jQuery para el método "on" .
var handler = function(event){
// if the target is a descendent of container do nothing
if($(event.target).is(".container, .container *")) return;
// remove event handler from document
$(document).off("click", handler);
// dostuff
}
$(document).on("click", handler);
Aquí estamos abusando de los selectores de jQuery y del burbujeo de eventos. Tenga en cuenta que me aseguro de limpiar el controlador de eventos después. Puede automatizar este comportamiento con $(''.container'').one ( ver: documentos ) pero debido a que necesitamos hacer condicionales dentro del controlador que no es aplicable aquí.
Aquí hay una solución CSS / pequeña JS en funcionamiento basada en la respuesta de Sandeep Pal:
$(document).click(function (e)
{
if (!$("#noticeMenu").is(e.target) && $("#noticeMenu").has(e.target).length == 0)
{
$("#menu-toggle3").prop(''checked'', false);
}
});
Pruébelo haciendo clic en la casilla de verificación y luego fuera del menú:
Este siguiente ejemplo de código parece funcionar mejor para mí. Si bien puedes usar ''return false'' que detiene todo el manejo de ese evento para el div o cualquiera de sus hijos. Si desea tener controles en el div emergente (un formulario de inicio de sesión emergente, por ejemplo), necesita usar event.stopPropogation ().
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<a id="link" href="#">show box</a>
<div id="box" style="background: #eee; display: none">
<p>a paragraph of text</p>
<input type="file" />
</div>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
var box = $(''#box'');
var link = $(''#link'');
link.click(function() {
box.show(); return false;
});
$(document).click(function() {
box.hide();
});
box.click(function(e) {
e.stopPropagation();
});
</script>
</body>
</html>
Esto no funciona: oculta el .myDIV cuando hace clic dentro de él.
$(''.openDiv'').click(function(e) {
$(''.myDiv'').show();
e.stopPropagation();
})
$(document).click(function(){
$(''.myDiv'').hide();
});
});
<a class="openDiv">DISPLAY DIV</a>
<div class="myDiv">HIDE DIV</div>
Gracias, Thomas. Soy nuevo en JS y he estado buscando una solución a mi problema. La tuya ayudó.
He usado jquery para hacer un cuadro de inicio de sesión que se desliza hacia abajo. Para obtener la mejor experiencia de usuario, decidí hacer desaparecer la caja cuando el usuario hace clic en algún lugar que no sea el recuadro. Estoy un poco avergonzado por usar unas cuatro horas arreglando esto. Pero oye, soy nuevo en JS.
Tal vez mi código puede ayudar a alguien:
<body>
<button class="login">Logg inn</button>
<script type="text/javascript">
$("button.login").click(function () {
if ($("div#box:first").is(":hidden")) {
$("div#box").slideDown("slow");}
else {
$("div#box").slideUp("slow");
}
});
</script>
<div id="box">Lots of login content</div>
<script type="text/javascript">
var box = $(''#box'');
var login = $(''.login'');
login.click(function() {
box.show(); return false;
});
$(document).click(function() {
box.hide();
});
box.click(function(e) {
e.stopPropagation();
});
</script>
</body>
Hice lo siguiente. Pensamiento de compartir para que alguien más también pueda beneficiarse.
$("div#newButtonDiv").click(function(){
$(this).find("ul.sub-menu").css({"display":"block"});
$(this).click(function(event){
event.stopPropagation();
$("html").click(function(){
$(this).find("ul.sub-menu").css({"display":"none"});
}
});
});
Avíseme si puedo ayudar a alguien en esto.
Lo que también puedes hacer es:
$(document).click(function (e)
{
var container = $("div");
if (!container.is(e.target) && container.has(e.target).length === 0)
{
container.fadeOut(''slow'');
}
});
Si su objetivo no es un div, oculte el div comprobando que su longitud es igual a cero.
Otra forma de ocultar el contenedor div cuando ocurre un clic en un elemento no dependiente;
$(document).on(''click'', function(e) {
if(!$.contains($(''.yourContainer'').get(0), e.target)) {
$(''.yourContainer'').hide();
}
});
Prueba esto
$(''.myDiv'').click(function(e) { //button click class name is myDiv
e.stopPropagation();
})
$(function(){
$(document).click(function(){
$(''.myDiv'').hide(); //hide the button
});
});
Utilizo el nombre de clase en lugar de ID , porque en asp.net tienes que preocuparte por las cosas adicionales que .net agrega a la ID
EDITAR : como agregó una pieza más, funcionaría así:
$(''.myDiv'').click(function() { //button click class name is myDiv
e.stopPropagation();
})
$(function(){
$(''.openDiv'').click(function() {
$(''.myDiv'').show();
});
$(document).click(function(){
$(''.myDiv'').hide(); //hide the button
});
});
Prueba esto, funciona perfecto para mí.
$(document).mouseup(function (e)
{
var searchcontainer = $("#search_container");
if (!searchcontainer.is(e.target) // if the target of the click isn''t the container...
&& searchcontainer.has(e.target).length === 0) // ... nor a descendant of the container
{
searchcontainer.hide();
}
});
Prueba esto:
$(document).mouseup(function (e) {
var div = $("your div");
if (!div.is(e.target) && div.has(e.target).length === 0)
{
div.hide();
}
});
Solo 2 pequeñas mejoras a las sugerencias anteriores:
- desvincular el documento. Haga clic en cuando haya terminado
detener la propagación en el evento que desencadenó esto, suponiendo que es un clic
jQuery(thelink).click(function(e){ jQuery(thepop).show(); // bind the hide controls var jpop=jQuery(thepop); jQuery(document).bind("click.hidethepop", function() { jpop.hide(); // unbind the hide controls jQuery(document).unbind("click.hidethepop"); }); // dont close thepop when you click on thepop jQuery(thepop).click(function(e) { e.stopPropagation(); }); // and dont close thepop now e.stopPropagation(); });
si entiendo que quieres ocultar un div cuando haces clic en cualquier lugar que no sea el div, y si haces clic sobre el div, entonces NO se debe cerrar. Puedes hacerlo:
$(document).click(function() {
alert("me");
});
$(".myDiv").click(function(e) {
e.stopPropagation(); // This is the preferred method.
return false; // This should not be used unless you do not want
// any click events registering inside the div
});
Esto vincula el clic a toda la página, pero si hace clic en el div en cuestión, cancelará el evento de clic.
$(document).ready(function(){
$("button").click(function(){
$(".div3").toggle(1000);
});
$("body").click(function(event) {
if($(event.target).attr(''class'') != ''1'' && $(event.target).attr(''class'') != ''div3''){
$(".div3").hide(1000);}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<button class="1">Click to fade in boxes</button><br><br>
<body style="width:100%;height:200px;background-color:pink;">
<div class="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div><body>
$(document).on(''click'', function(e) { // Hides the div by clicking any where in the screen
if ( $(e.target).closest(''#suggest_input'').length ) {
$(".suggest_div").show();
}else if ( ! $(e.target).closest(''.suggest_container'').length ) {
$(''.suggest_div'').hide();
}
});
Aquí #suggest_input in es el nombre de textbox y .suggest_container es el nombre de la clase ul y .suggest_div es el elemento div principal para mi auto-sugerencia.
este código es para ocultar los elementos div haciendo clic en cualquier parte de la pantalla. Antes de hacer cualquier cosa, por favor, comprenda el código y cópielo ...
$(''html'').click(function() {
//Hide the menus if it is visible
});
$(''#menu_container'').click(function(event){
event.stopPropagation();
});
pero debes tener en cuenta estas cosas también. http://css-tricks.com/dangers-stopping-event-propagation/
$(document).mouseup(function (e)
{
var mydiv = $(''div#mydiv'');
if (!mydiv.is(e.target) && mydiv.has(e.target).length === 0){
search.slideUp();
}
});