¿Cómo verifico si un elemento está oculto en jQuery?

7747

¿Es posible alternar la visibilidad de un elemento, usando las funciones .hide(), .show()o .toggle()?

¿Cómo probarías si un elemento es visibleo hidden?

Philip Morton
fuente
49
Vale la pena mencionar (incluso después de todo este tiempo), que $(element).is(":visible")funciona para jQuery 1.4.4, pero no para jQuery 1.3.2, en Internet & nbsp; Explorer & nbsp; 8 . Esto se puede probar con el útil fragmento de prueba de Tsvetomir Tsonev . Solo recuerde cambiar la versión de jQuery, para probar debajo de cada una.
Rubén
2
Esto está relacionado aunque una pregunta diferente: stackoverflow.com/questions/17425543/…
Mark Schultheiss

Respuestas:

9402

Como la pregunta se refiere a un solo elemento, este código podría ser más adecuado:

// Checks CSS content for display:[none|block], ignores visibility:[true|false]
$(element).is(":visible");

// The same works with hidden
$(element).is(":hidden");

Es lo mismo que la sugerencia de twernt , pero se aplica a un solo elemento; y coincide con el algoritmo recomendado en las preguntas frecuentes de jQuery .

Usamos jQuery's is () para verificar el elemento seleccionado con otro elemento, selector o cualquier objeto jQuery. Este método recorre los elementos DOM para encontrar una coincidencia que satisfaga el parámetro pasado. Volverá verdadero si hay una coincidencia, de lo contrario devolverá falso.

Tsvetomir Tsonev
fuente
164
Esta solución parecería alentar la confusión de visible=falsey display:none; Considerando que la solución de Mote claramente distorsiona la intención del codificador de verificar el display:none; (a través de la mención de ocultar y mostrar qué control display:noneno visible=true)
kralco626
93
Eso es correcto, pero :visibletambién verificará si los elementos principales son visibles, como señaló chiborg.
Tsvetomir Tsonev
45
Tienes un punto: dejaré en claro que el código solo verifica la displaypropiedad. Dado que la pregunta original es para show()y hide(), y establecen display, mi respuesta es correcta. Por cierto, funciona con IE7, aquí hay un fragmento de prueba: jsfiddle.net/MWZss ;
Tsvetomir Tsonev
53
De hecho, descubrí que las palabras de lógica inversa son mejores:! $ ('Selector'). Is (': hidden'); por alguna razón. Vale la pena intentarlo.
Kzqai
21
Aquí hay una prueba de referencia simple que es () contra regexp: jsperf.com/jquery-is-vs-regexp-for-css-visibility . Conclusión: si está fuera de rendimiento, use regexp over is () (ya que is () busca primero todos los nodos ocultos antes de mirar el elemento real).
Max Leske
1460

Puedes usar el hiddenselector:

// Matches all elements that are hidden
$('element:hidden')

Y el visibleselector:

// Matches all elements that are visible
$('element:visible')
twernt
fuente
67
solo tenga cuidado, hay algunos buenos consejos relacionados con el rendimiento en esta presentación: addyosmani.com/jqprovenperformance
codecraig
27
En las páginas 21 a 28 muestra cuán lento: oculto o: visible se compara con otros selectores. Gracias por señalar esto.
Etienne Dupuis
109
Cuando se trata de un par de elementos y está sucediendo muy poco, es decir, LA MAYORÍA ABSOLUTAMENTE DE LOS CASOS, el problema del tiempo es una preocupación ridículamente menor. Oh no! ¡Tomó 42 ms en lugar de 19 ms!
vbullinger
16
Estoy alternando el elemento maternalmente usando este selector. ¡$ ('elemento: oculto') siempre es cierto para mí!
ZoomIn
15
@cwingrav Es posible que desee volver a leer la documentación: oculto se aplica a todos los elementos. Formar elementos con type="hidden"es solo un caso que puede desencadenarse: oculto. Los elementos sin altura y anchura, los elementos con display: noney los elementos con ancestros ocultos también se clasificarán como: ocultos.
Joshua Walsh
951
if ( $(element).css('display') == 'none' || $(element).css("visibility") == "hidden"){
    // 'element' is hidden
}

El método anterior no considera la visibilidad del padre. Para considerar también a los padres, debe usar .is(":hidden")o .is(":visible").

Por ejemplo,

<div id="div1" style="display:none">
  <div id="div2" style="display:block">Div2</div>
</div>

El método anterior se considerará div2visible mientras :visibleno. Pero lo anterior podría ser útil en muchos casos, especialmente cuando necesita encontrar si hay divisiones de error visibles en el padre oculto porque en tales condiciones :visibleno funcionará.

Mota
fuente
131
Esto solo verifica la propiedad de visualización de un único elemento. El atributo: visible también verifica la visibilidad de los elementos principales.
chiborg
16
Esta es la única solución que funcionó para mí cuando
probé
20
@chiborg Sí, pero a veces eso es lo que quieres y tuve que aprender de la manera difícil lo "inteligente" que era jQuery ...
Casey
99
Esto hace responder a la pregunta, siendo la pregunta se refiere a un solo elemento y mediante el uso de las hide(), show()y toggle()funciones, sin embargo, como la mayoría ya han dicho, debemos utilizar los :visibley :hiddenpseudo-clases.
Jimmy Knoot
2
Esta respuesta se puede usar cuando existe un elemento pero no está actualmente en la página, como después de detach ().
atheaos
526

Ninguna de estas respuestas responde a lo que entiendo que es la pregunta, que es lo que estaba buscando, "¿Cómo manejo los elementos que tienen visibility: hidden?" . Ni :visibletampoco :hiddenva a manejar esto, ya que ambos se buscan para su visualización por la documentación. Por lo que pude determinar, no hay un selector para manejar la visibilidad CSS. Así es como lo resolví (selectores jQuery estándar, puede haber una sintaxis más condensada):

$(".item").each(function() {
    if ($(this).css("visibility") == "hidden") {
        // handle non visible state
    } else {
        // handle visible state
    }
});
aaronLile
fuente
18
Esta respuesta es buena para manejarla visibilityliteralmente, pero la pregunta era How you would test if an element has been hidden or shown using jQuery?. Usar jQuery significa: la displaypropiedad.
MarioDS
10
Los elementos con visibility: hiddeno opacity: 0se consideran visibles, ya que aún consumen espacio en el diseño. Vea la respuesta de Pedro Rainho y la documentación de jQuery en el :visibleselector.
temor
99
necesita recorrer el DOM para verificar los padres del nodo, o de lo contrario, esto es inútil.
vsync
390

De ¿Cómo se determina el estado de un elemento toggled?


Puede determinar si un elemento está contraído o no utilizando los selectores :visibley :hidden.

var isVisible = $('#myDiv').is(':visible');
var isHidden = $('#myDiv').is(':hidden');

Si simplemente está actuando sobre un elemento en función de su visibilidad, puede incluir :visibleo :hiddenen la expresión del selector. Por ejemplo:

 $('#myDiv:visible').animate({left: '+=200px'}, 'slow');
user574889
fuente
44
preguntándose por qué ninguna respuesta menciona el caso cuando el elemento se aleja de la ventana visible, como top:-1000px... Supongo que es un caso
límite
295

A menudo, cuando se verifica si algo es visible o no, usted va a seguir inmediatamente y hacer algo más con él. El encadenamiento de jQuery lo hace fácil.

Por lo tanto, si tiene un selector y desea realizar alguna acción sobre él solo si está visible u oculto, puede usarlo filter(":visible")o filter(":hidden")seguirlo encadenándolo con la acción que desea realizar.

Entonces, en lugar de una ifdeclaración, así:

if ($('#btnUpdate').is(":visible"))
{
     $('#btnUpdate').animate({ width: "toggle" });   // Hide button
}

O más eficiente, pero aún más feo:

var button = $('#btnUpdate');
if (button.is(":visible"))
{
     button.animate({ width: "toggle" });   // Hide button
}

Puedes hacerlo todo en una línea:

$('#btnUpdate').filter(":visible").animate({ width: "toggle" });
Simon_Weaver
fuente
25
No hay razón para extraer el nodo DOM en el fragmento utilizado en el ejemplo, y luego tener que volver a buscarlo. Mejor hacerlo: var $ button = $ ('# btnUpdate'); Y luego en las expresiones If solo use el botón $ en lugar de $ (botón). Tiene la ventaja de almacenar en caché el objeto jQuery.
LocalPCGuy
1
Aquí hay un ejemplo simple jquerypot.com/…
Ketan Savaliya
242

El :visibleselector de acuerdo con la documentación de jQuery :

  • Tienen un displayvalor CSS de none.
  • Son elementos de forma con type="hidden".
  • Su ancho y alto se establecen explícitamente en 0.
  • Un elemento ancestro está oculto, por lo que el elemento no se muestra en la página.

Los elementos con visibility: hiddeno opacity: 0se consideran visibles, ya que aún consumen espacio en el diseño.

Esto es útil en algunos casos e inútil en otros, porque si desea verificar si el elemento es visible ( display != none), ignorando la visibilidad de los padres, encontrará que hacerlo .css("display") == 'none'no solo es más rápido, sino que también devolverá la verificación de visibilidad correctamente.

Si desea comprobar la visibilidad en lugar de la pantalla, se debe utilizar: .css("visibility") == "hidden".

También tenga en cuenta las notas adicionales de jQuery :

Debido a que :visiblees una extensión jQuery y no forma parte de la especificación CSS, las consultas que se utilizan :visibleno pueden aprovechar el aumento de rendimiento proporcionado por el querySelectorAll()método DOM nativo . Para lograr el mejor rendimiento cuando se usa :visiblepara seleccionar elementos, primero seleccione los elementos usando un selector CSS puro, luego use .filter(":visible").

Además, si le preocupa el rendimiento, debe verificar Ahora me ve ... mostrar / ocultar el rendimiento (2010-05-04). Y use otros métodos para mostrar y ocultar elementos.

Pedro Rainho
fuente
214

Esto funciona para mí, y estoy usando show()y hide()para hacer que mi div esté oculto / visible:

if( $(this).css('display') == 'none' ){
    /* your code goes here */
} else {
    /* alternate logic   */
}
Abiy
fuente
213

Cómo funciona la visibilidad del elemento y jQuery ;

Un elemento podría estar oculto con display:none, visibility:hiddeno opacity:0. La diferencia entre esos métodos:

  • display:none oculta el elemento y no ocupa espacio;
  • visibility:hidden oculta el elemento, pero aún ocupa espacio en el diseño;
  • opacity:0oculta el elemento como "visibilidad: oculto", y todavía ocupa espacio en el diseño; la única diferencia es que la opacidad le permite a uno hacer que un elemento sea parcialmente transparente;

    if ($('.target').is(':hidden')) {
      $('.target').show();
    } else {
      $('.target').hide();
    }
    if ($('.target').is(':visible')) {
      $('.target').hide();
    } else {
      $('.target').show();
    }
    
    if ($('.target-visibility').css('visibility') == 'hidden') {
      $('.target-visibility').css({
        visibility: "visible",
        display: ""
      });
    } else {
      $('.target-visibility').css({
        visibility: "hidden",
        display: ""
      });
    }
    
    if ($('.target-visibility').css('opacity') == "0") {
      $('.target-visibility').css({
        opacity: "1",
        display: ""
      });
    } else {
      $('.target-visibility').css({
        opacity: "0",
        display: ""
      });
    }

    Métodos útiles de alternar jQuery:

    $('.click').click(function() {
      $('.target').toggle();
    });
    
    $('.click').click(function() {
      $('.target').slideToggle();
    });
    
    $('.click').click(function() {
      $('.target').fadeToggle();
    });
webvitaly
fuente
20
Otra diferencia entre visibility:hiddeny opacity:0es que el elemento seguirá respondiendo a eventos (como clics) con opacity:0. Aprendí ese truco al hacer un botón personalizado para cargar archivos.
urraka
1
también si oculta la entrada con opacidad: 0, todavía se selecciona con la tecla de tabulación
YangombiUmpakati
161

También puede hacer esto usando JavaScript simple:

function isRendered(domObj) {
    if ((domObj.nodeType != 1) || (domObj == document.body)) {
        return true;
    }
    if (domObj.currentStyle && domObj.currentStyle["display"] != "none" && domObj.currentStyle["visibility"] != "hidden") {
        return isRendered(domObj.parentNode);
    } else if (window.getComputedStyle) {
        var cs = document.defaultView.getComputedStyle(domObj, null);
        if (cs.getPropertyValue("display") != "none" && cs.getPropertyValue("visibility") != "hidden") {
            return isRendered(domObj.parentNode);
        }
    }
    return false;
}

Notas:

  1. Funciona en todas partes

  2. Funciona para elementos anidados.

  3. Funciona para CSS y estilos en línea.

  4. No requiere un marco

Matt Brock
fuente
66
Funciona de manera ligeramente diferente a la de jQuery; se considera visibility: hiddenpara ser visibles .
alex
44
Es bastante fácil cambiar el código anterior para imitar el comportamiento (posiblemente estúpido) de jQuery. . . . . function isRendered (o) {if ((o.nodeType! = 1) || (o == document.body)) {return true;} if (o.currentStyle && o.currentStyle ["display"]! = "none") {return isRendered (o.parentNode);} else if (window.getComputedStyle) {if (document.defaultView.getComputedStyle (o, null) .getPropertyValue ("display")! = "none") {return isRendered (o.parentNode );}} return false;}
Matt Brock
3
Claro, solo estaba agregando eso para el beneficio de los usuarios que usaron esto sin escanear su código. :)
alex
160

Yo usaría la clase CSS .hide { display: none!important; }.

Para ocultar / mostrar, llamo .addClass("hide")/.removeClass("hide"). Para verificar la visibilidad, yo uso .hasClass("hide").

Es una forma simple y clara de verificar / ocultar / mostrar elementos, si no planea usar .toggle()o .animate()métodos.

Evgeny Levin
fuente
11
.hasClass('hide')no comprueba si un antepasado del padre está oculto (lo que también lo haría oculto). Es posible que esto funcione correctamente comprobando si .closest('.hide').length > 0, pero ¿por qué reinventar la rueda?
nbrooks
1
La variante que propone devuelve si el elemento está visible en html, mi variante devuelve si el elemento estaba directamente oculto por su motor de código / vista de JavaScript. Si sabe que los elementos principales nunca deben ocultarse, use .hasClass () para ser más estricto y evitar futuros errores. Si desea comprobar no solo la visibilidad, sino también el estado del elemento establecido, use .hasClass () también. En otros casos, .closest () es mejor.
Evgeny Levin
1
¿Por qué no usas .is (": visible")?
dont_trust_me
138

Enlace de demostración

$('#clickme').click(function() {
  $('#book').toggle('slow', function() {
    // Animation complete.
    alert($('#book').is(":visible")); //<--- TRUE if Visible False if Hidden
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="clickme">
  Click here
</div>
<img id="book" src="https://upload.wikimedia.org/wikipedia/commons/8/87/Google_Chrome_icon_%282011%29.png" alt="" width="300"/>

Fuente:

Blogger Plug n Play - Herramientas y widgets jQuery: cómo ver si Element está oculto o es visible usando jQuery

Code Spy
fuente
1
@Adrew pero este enlace muestra un ejemplo funcional de esta función. Creo que una respuesta práctica puede pesar sobre una página completa de texto :)
Code Spy
133

Simplemente se puede usar el atributo hiddeno visible, como:

$('element:hidden')
$('element:visible')

O se puede simplificar con el mismo es de la siguiente manera.

$(element).is(":visible")
Escorpión
fuente
130

ebdivdebe ajustarse a style="display:none;". Funciona tanto para mostrar como para ocultar:

$(document).ready(function(){
    $("#eb").click(function(){
        $("#ebdiv").toggle();
    });    
});
Vaishu
fuente
118

Otra respuesta que debe tener en cuenta es que si está ocultando un elemento, debe usar jQuery , pero en lugar de ocultarlo, elimina todo el elemento, pero copia su contenido HTML y la etiqueta en una variable jQuery, y luego todo lo que necesita hacer es probar si existe tal etiqueta en la pantalla, utilizando la normal if (!$('#thetagname').length).

Lucas
fuente
100

Al probar un elemento contra el :hiddenselector en jQuery, se debe considerar que un elemento en posición absoluta puede reconocerse como oculto aunque sus elementos secundarios sean visibles .

Esto parece algo contrario a la intuición en primer lugar, aunque echar un vistazo más de cerca a la documentación de jQuery proporciona la información relevante:

Los elementos pueden considerarse ocultos por varias razones: [...] su ancho y alto se establecen explícitamente en 0. [...]

Entonces, esto realmente tiene sentido en lo que respecta al modelo de caja y el estilo calculado para el elemento. Incluso si ancho y alto no se establecen explícitamente en 0, pueden establecerse implícitamente .

Eche un vistazo al siguiente ejemplo:

console.log($('.foo').is(':hidden')); // true
console.log($('.bar').is(':hidden')); // false
.foo {
  position: absolute;
  left: 10px;
  top: 10px;
  background: #ff0000;
}

.bar {
  position: absolute;
  left: 10px;
  top: 10px;
  width: 20px;
  height: 20px;
  background: #0000ff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="foo">
  <div class="bar"></div>
</div>


Actualización para jQuery 3.x:

¡Con jQuery 3 el comportamiento descrito cambiará! Los elementos se considerarán visibles si tienen cuadros de diseño, incluidos los de ancho y / o alto cero.

JSFiddle con jQuery 3.0.0-alpha1:

http://jsfiddle.net/pM2q3/7/

El mismo código JavaScript tendrá esta salida:

console.log($('.foo').is(':hidden')); // false
console.log($('.bar').is(':hidden')); // false
conceptdeluxe
fuente
90

Esto puede funcionar:

expect($("#message_div").css("display")).toBe("none");
Maneesh Kumar
fuente
77
¿Qué idioma / dialecto / biblioteca es este? No estoy familiarizado con esta sintaxis en JS ...
nbrooks
74

Ejemplo:

$(document).ready(function() {
  if ($("#checkme:hidden").length) {
    console.log('Hidden');
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="checkme" class="product" style="display:none">
  <span class="itemlist"><!-- Shows Results for Fish --></span> Category:Fish
  <br>Product: Salmon Atlantic
  <br>Specie: Salmo salar
  <br>Form: Steaks
</div>

Irfan DANISH
fuente
66

Para verificar si no está visible, uso !:

if ( !$('#book').is(':visible')) {
    alert('#book is not visible')
}

O el siguiente también es el sam, guardando el selector jQuery en una variable para tener un mejor rendimiento cuando lo necesite varias veces:

var $book = $('#book')

if(!$book.is(':visible')) {
    alert('#book is not visible')
}
Matthias Wegtun
fuente
1
¿Cómo determinó que guardar un selector en variable es realmente más rápido?
Ilia Rostovtsev
3
Hola @Ilia Rostovtsev jsperf.com/caching-jquery-selectors Allí puedes ejecutar la prueba. De todos modos, es bueno tenerlo en caché para que se pueda acceder más rápido
Matthias Wegtun
2
Esto es adecuado si desea utilizar una sola variable durante todo el proceso en lugar de llamar y llamar al mismo objeto.
Kenneth Palaganas
60

Use alternar clases, no editar estilos. . .

Usar clases designadas para elementos "escondidos" es fácil y también uno de los métodos más eficientes. Alternar una clase 'oculta' con un Displayestilo 'ninguno' funcionará más rápido que editar ese estilo directamente. Expliqué algo de esto bastante a fondo en la pregunta de desbordamiento de pila. Cómo convertir dos elementos visibles / ocultos en el mismo div .


Mejores prácticas y optimización de JavaScript

Aquí hay un video verdaderamente esclarecedor de Google Tech Talk del ingeniero front-end de Google Nicholas Zakas:

Desequilibrado
fuente
60

Ejemplo de uso de la verificación visible para adblocker está activado:

$(document).ready(function(){
  if(!$("#ablockercheck").is(":visible"))
    $("#ablockermsg").text("Please disable adblocker.").show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ad-placement" id="ablockercheck"></div>
<div id="ablockermsg" style="display: none"></div>

"ablockercheck" es un ID que bloquea el bloqueador de anuncios. Entonces, verificando si está visible, puede detectar si el bloqueador de anuncios está activado.

Roman Losev
fuente
58

Después de todo, ninguno de los ejemplos me conviene, así que escribí el mío.

Pruebas (sin soporte de Internet Explorer filter:alpha):

a) Verifique si el documento no está oculto

b) Verifique si un elemento tiene cero ancho / alto / opacidad o display:none/ visibility:hiddenen estilos en línea

c) Verifique si el centro (también porque es más rápido que probar cada píxel / esquina) del elemento no está oculto por otro elemento (y todos sus antepasados, por ejemplo: overflow:hidden / scroll / un elemento sobre otro) o los bordes de la pantalla

d) Compruebe si un elemento tiene cero ancho / alto / opacidad o display:none/ visibilidad: oculto en estilos calculados (entre todos los antepasados)

Probado en

Android 4.4 (navegador nativo / Chrome / Firefox), Firefox (Windows / Mac), Chrome (Windows / Mac), Opera (Windows Presto / Mac WebKit), Internet Explorer (modos de documento de Internet Explorer 5-11 + Internet Explorer 8 en un máquina virtual) y Safari (Windows / Mac / iOS).

var is_visible = (function () {
    var x = window.pageXOffset ? window.pageXOffset + window.innerWidth - 1 : 0,
        y = window.pageYOffset ? window.pageYOffset + window.innerHeight - 1 : 0,
        relative = !!((!x && !y) || !document.elementFromPoint(x, y));
        function inside(child, parent) {
            while(child){
                if (child === parent) return true;
                child = child.parentNode;
            }
        return false;
    };
    return function (elem) {
        if (
            document.hidden ||
            elem.offsetWidth==0 ||
            elem.offsetHeight==0 ||
            elem.style.visibility=='hidden' ||
            elem.style.display=='none' ||
            elem.style.opacity===0
        ) return false;
        var rect = elem.getBoundingClientRect();
        if (relative) {
            if (!inside(document.elementFromPoint(rect.left + elem.offsetWidth/2, rect.top + elem.offsetHeight/2),elem)) return false;
        } else if (
            !inside(document.elementFromPoint(rect.left + elem.offsetWidth/2 + window.pageXOffset, rect.top + elem.offsetHeight/2 + window.pageYOffset), elem) ||
            (
                rect.top + elem.offsetHeight/2 < 0 ||
                rect.left + elem.offsetWidth/2 < 0 ||
                rect.bottom - elem.offsetHeight/2 > (window.innerHeight || document.documentElement.clientHeight) ||
                rect.right - elem.offsetWidth/2 > (window.innerWidth || document.documentElement.clientWidth)
            )
        ) return false;
        if (window.getComputedStyle || elem.currentStyle) {
            var el = elem,
                comp = null;
            while (el) {
                if (el === document) {break;} else if(!el.parentNode) return false;
                comp = window.getComputedStyle ? window.getComputedStyle(el, null) : el.currentStyle;
                if (comp && (comp.visibility=='hidden' || comp.display == 'none' || (typeof comp.opacity !=='undefined' && comp.opacity != 1))) return false;
                el = el.parentNode;
            }
        }
        return true;
    }
})();

Cómo utilizar:

is_visible(elem) // boolean
Aleko
fuente
50

Debe verificar ambos ... Pantalla y visibilidad:

if ($(this).css("display") == "none" || $(this).css("visibility") == "hidden") {
    // The element is not visible
} else {
    // The element is visible
}

Si buscamos $(this).is(":visible"), jQuery verifica ambas cosas automáticamente.

Premshankar Tiwari
fuente
41

Tal vez puedas hacer algo como esto

$(document).ready(function() {
   var visible = $('#tElement').is(':visible');

   if(visible) {
      alert("visible");
                    // Code
   }
   else
   {
      alert("hidden");
   }
});
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

<input type="text" id="tElement" style="display:block;">Firstname</input>

Mathias Stavrou
fuente
37

Simplemente verifique la visibilidad buscando un valor booleano, como:

if (this.hidden === false) {
    // Your code
}

Usé este código para cada función. De lo contrario, puede usar is(':visible')para verificar la visibilidad de un elemento.

pixellabme
fuente
34

Porque Elements with visibility: hidden or opacity: 0 are considered visible, since they still consume space in the layout(como se describe para jQuery: Selector visible ), podemos verificar si el elemento es realmente visible de esta manera:

function isElementReallyHidden (el) {
    return $(el).is(":hidden") || $(el).css("visibility") == "hidden" || $(el).css('opacity') == 0;
}

var booElementReallyShowed = !isElementReallyHidden(someEl);
$(someEl).parents().each(function () {
    if (isElementReallyHidden(this)) {
        booElementReallyShowed = false;
    }
});
Andron
fuente
30

Se puede crear una función para verificar los atributos de visibilidad / visualización para medir si el elemento se muestra en la interfaz de usuario o no.

function checkUIElementVisible(element) {
    return ((element.css('display') !== 'none') && (element.css('visibility') !== 'hidden'));
}

Violín de trabajo

V31
fuente
29

También aquí hay una expresión condicional ternaria para verificar el estado del elemento y luego alternarlo:

$('someElement').on('click', function(){ $('elementToToggle').is(':visible') ? $('elementToToggle').hide('slow') : $('elementToToggle').show('slow'); });
cssimsek
fuente
44
O bien, simplemente deshazte de todo el condicional y di $('elementToToggle').toggle('slow');...:)
nbrooks
29
if($('#postcode_div').is(':visible')) {
    if($('#postcode_text').val()=='') {
        $('#spanPost').text('\u00a0');
    } else {
        $('#spanPost').text($('#postcode_text').val());
}
Gaurav
fuente