Me gustaría saber si esta es la forma correcta de ocultar los elementos visibles al hacer clic en cualquier lugar de la página.jQuery ocultar elemento al hacer clic en cualquier lugar de la página
$(document).click(function (event) {
$('#myDIV:visible').hide();
});
El elemento (div, span, etc.) no debe desaparecer cuando se produce un evento de clic dentro de los límites del elemento.
si entiendo que desee ocultar un div al hacer clic en cualquier lugar, pero el div, y si hace clic mientras que en el div, entonces no debería estrecha. usted puede hacer esto:
$(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 se une el clic a toda la página, pero si se hace clic en el div en cuestión se va a cancelar el evento click.
probar este
$('.myDiv').click(function(e) { //button click class name is myDiv
e.stopPropagation();
})
$(function(){
$(document).click(function(){
$('.myDiv').hide(); //hide the button
});
});
usar nombre de la clase en lugar de ID, porque en asp.net que tiene que preocuparse acerca de .NET material extra se une a la Identificación del
EDIT- Desde que agregó una otra pieza, que sería el siguiente:
$('.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
});
});
lo tienes exactamente lo contrario. Puedes agregar y eliminar clases de los elementos, Id nunca cambia –
no, lo tienes enfrente, me refería a cuando utilizas los controles del servidor asp.net .. los identificadores cambias utilizas el atributo runat = server – TStamper
lee mi comentario y lee OP es más cuidadoso. –
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>
por lo que desea que se muestre el div para mostrar cuándo se coloca el enlace, luego tome e.stopPropa .. fuera de allí y siga mi opción – TStamper
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>
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>
sólo 2 pequeñas mejoras a las sugerencias anteriores:
propagación parada 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();
});
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ísame si puedo ayudar a alguien en esto.
Código excelente y no se ejecuta si no se hace clic en 'div # newButtonDiv'. Le recomendaría que elimine el segundo '.click()' en la línea 4 (si lo hace, recuerde eliminar las llaves de cierre, paréntesis y punto y coma - línea 9). – AUllah1
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 el jQuery docs for the "on" method.
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 el burbujeo de los eventos. Tenga en cuenta que me aseguro de limpiar el controlador de eventos después. Puede automatizar este comportamiento con $('.container').one (see: docs), pero debido a que necesitamos hacer condicionales dentro del controlador que no es aplicable aquí.
Así que ... esto funcionó PERFECTAMENTE para mí en caso de que alguien necesite una aclaración. También es la ÚNICA solución que funcionó para mi situación. –
Lo que también se puede 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 a continuación, ocultar el div comprobando su longitud es igual a cero.
Rock. Esta solución funcionó como esperaba. ¡Gracias un montón! – Bullyen
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();
}
});
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();
}
});
$('html').click(function() {
//Hide the menus if it is visible
});
$('#menu_container').click(function(event){
event.stopPropagation();
});
pero hay que tener en cuenta estas cosas así. http://css-tricks.com/dangers-stopping-event-propagation/
$(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 en es el nombre del cuadro de texto y .suggest_container es el nombre de la clase UL y .suggest_div es el principal elemento div para mi sugerencia automática.
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 copiarlo ...
Aquí es una pequeña solución de trabajo CSS/JS basado 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);
}
});
Para probarlo, hacer clic en la casilla de verificación y luego fuera del menú:
Prueba esto:
$(document).mouseup(function (e) {
var div = $("your div");
if (!div.is(e.target) && div.has(e.target).length === 0)
{
div.hide();
}
});
$(document).mouseup(function (e)
{
var mydiv = $('div#mydiv');
if (!mydiv.is(e.target) && mydiv.has(e.target).length === 0){
search.slideUp();
}
});
La respuesta idéntica ya estaba debajo. Alrededor de 2 años tarde. – Illdapt
$(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>
no, lo tiene al revés, me refería a cuando se usan los controles del servidor asp.net. .los identificadores cambian usted usa el atributo runat = server – TStamper
no, usted se estaba refiriendo a algo a lo que el OP nunca aludió, no mencionó a asp.net, y la maravillosa filosofía de ctl _... id naming. Aparte de eso, las reglas de HTML establecen que las identificaciones no cambian, y dado que estamos hablando de JavaScript, las clases cambian. –
que, cuando las clases cambian a menos que cuando las cambies tú mismo, me estuviera refiriendo a mi preferencia – TStamper