mostrar - ocultar boton javascript

Ocultar un DIV cuando pierde el enfoque/desenfoque

Question

Tengo un JavaScript que muestra un DIV (establece su propiedad css de visualización de "ninguna" a "normal". la propiedad de visualización está establecida en ninguna (básicamente, la oculta). Estoy usando JavaScript y jQuery

Answer 1

Al activar el evento mouseup (), podemos verificar que el clic se encuentre dentro de la división o un descendiente y actuar en consecuencia.

$(document).mouseup(function (e) {
    var divContent= $(".className");
    if(!divContent.is(e.target) && divContent.has(e.target).length === 0) {
        $(".className").hide();
    }
});

Answer 2

Con jQuery puedes ocultar elementos con hide() , ej: $("#foo").hide()

Ocultar elemento en el detector de eventos:

$("#foo").blur(function() {
    $("#foo").hide();
});

Answer 3

Con respecto a los clics del mouse, vea las otras respuestas.

Sin embargo, con respecto a la pérdida de enfoque, .focusout no es el evento al que se debe adjuntar, sino más bien .focusin . ¿Por qué? Considere la siguiente ventana emergente:

<div class="popup">
  <input type="text" name="t1">
  <input type="text" name="t2">
</div>

¿Qué pasa al pasar de t1 a t2?

• t1 envía focusout , que burbujea hasta $(''.popup'').focusout
• t2 envía focusin , que burbujea hasta $(''.popup'').focusin

... así que obtienes ambos tipos de eventos a pesar de que el enfoque se mantuvo completamente dentro de la ventana emergente.

La solución es análoga al truco de magia hecho con .click :

$(document).ready(function() {
    $(''html'').focusin(function() {
        $(''.popup'').hide(); 
    });
    $(''.popup'').focusin(function(ev) {
        ev.stopPropagation(); 
    });
});

(nota al margen: encontré que la .not(...) no funciona para bc. de eventos).

Bonificación: violín de trabajo, haga clic en mí : abra la ventana emergente y luego intente hojear las entradas.

Answer 4

Desafortunadamente, los ejemplos que ya se dieron no funcionan si tiene un iframe en su sitio y luego hace clic dentro del iframe. Adjuntar el evento al documento solo se adjuntará al mismo documento en el que se encuentra su elemento.

También puede adjuntarlo a cualquier iframes que esté utilizando, pero la mayoría de los navegadores no le permitirán hacer esto si el iframe ha cargado contenido de otro dominio.

La mejor manera de hacer esto es copiar lo que se hace en el complemento de la barra de menús de la interfaz de usuario de jQuery.

Ejemplo básico de HTML:

<div id="menu">Click here to show the menu
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li><a href="#">Item 3</a></li>
    </ul>
</div>

Y el jQuery necesitaba para que funcione:

var timeKeeper;

$(''#menu'').click(function()
{
    $(''#menu ul'').show();
});

$(''#menu ul'').click(function()
{
    clearTimeout(timeKeeper);                  
});

$(''#menu'').focusout(function()
{
    timeKeeper = setTimeout(function() {$(''#menu ul'').hide()}, 150);
});

$(''#menu'').attr(''tabIndex'', -1);
$(''#menu ul'').hide();

Lo que hace es darle al menú un índice de pestañas, de modo que se pueda considerar que tiene el foco. Ahora que lo ha hecho, puede usar el controlador de eventos focusout en el menú. Esto se activará siempre que se considere que pierde el foco. Desafortunadamente, al hacer clic en algunos elementos secundarios se activará el evento de enfoque (por ejemplo, al hacer clic en los enlaces), por lo que debemos desactivar la opción de ocultar el menú si se ha hecho clic en algún elemento secundario.

Debido a que se llama al evento focusout antes del evento de clic de cualquier elemento secundario, la forma de lograrlo es establecer un pequeño tiempo de espera antes de ocultar el elemento, y luego hacer clic en cualquier elemento secundario debe borrarse este tiempo de espera, lo que significa que el menú no se obtiene. oculto.

Aquí está mi ejemplo de trabajo jsfiddle

Answer 5

Mostrar es fácil

$(''somewhere'').click(function {$(''#foo'').show();})

Para esconderse

¿Cómo escondo un div cuando pierde su foco?

Answer 6

Para ocultar el div al hacer clic en cualquier lugar de la página, excepto el selectdiv

$(document).not("#selecteddiv").click(function() {
        $(''#selecteddiv'').hide();
    });

Si desea ocultar el div con foco perdido o desenfoque con animación, entonces también

$("#selecteddiv").focusout(function() {
        $(''#selecteddiv'').hide();
    });

con animacion

$("#selecteddiv").focusout(function() {
    $(''#selecteddiv'').animate({
        display:"none"
    });
});

Que esto te ayude

Answer 7

Personalmente, no he probado el desenfoque en divs, solo en entradas, etc. Si el manejador de eventos blur funciona, es perfecto y lo uso. Si no es así, puedes ver esto: jQuery animate cuando <div> pierde el foco

Answer 8

Puede enlazar una función al hacer clic en el cuerpo y verificar si es el div actual usando e.target (e es el evento)

$(document).ready(function () {
  $("body").click(function(e) {     
    if($(e.target).attr(''id'') === "div-id") {
        $("#div-id").show();
    }
    else {
        $("#div-id").hide();
    }
  });
});

Answer 9

También estaba buscando esto y aquí encontré la solución https://api.jquery.com/mouseleave/ . Esto puede ser útil para futuros lectores.

El evento del mouseleave difiere del mouseout en la forma en que maneja el evento bubbling. Si se usara el mouseout en este ejemplo, cuando el puntero del mouse se moviera fuera del elemento interno, se activaría el controlador. Esto suele ser un comportamiento indeseable. Por otro lado, el evento de la celebración del mouseleave solo activa su manejador cuando el mouse deja el elemento al que está vinculado, no un descendiente.

Answer 10

$(document).mouseup(function (e)
{
    var container = $("YOUR CONTAINER SELECTOR");

   if (!container.is(e.target)&& container.has(e.target).length === 0) 
   {
      container.hide();
   }
});

Answer 11

$(''.menu > li'').click(function() {
    $(this).children(''ul'').stop().slideDown(''fast'',function()
    {
        $(document).one(''click'',function()
        {
            $(''.menu > li'').children(''ul'').stop().slideUp(''fast'');
        });
    });

});