2011-12-23 13 views
42

Estoy tratando de escribir un script que ocultará/mostrará div dependiendo de la visibilidad de otros elementos. La acción debería tener lugar cuando hago clic en otro elemento. Esto es lo que he escrito hasta ahora:jQuery if declaración para verificar la visibilidad

$('#column-left form').hide(); 
    $('.show-search').click(function() { 
     $('#column-left form').stop(true, true).slideToggle(300); 
     if($('#column-left form').css('display') == 'none') { 
      $("#offers").show(); 
     } else { 
      $('#offers').hide(); 
     } 
    }); 

Oculta el div, pero no vuelve cuando oculto el formulario. Será agradecido por cualquier ayuda :)

edición:

Ok, he conseguido el efecto deseado achive escribiendo esto:

$('#column-left form').hide(); 
    $('.show-search').click(function() { 
     if ($('#column-left form').is(":hidden")) { 
      $('#column-left form').slideToggle(300); 
      $('#offers').hide(); 
     } else { 
      $('#column-left form').slideToggle(300); 
      $("#offers").show(); 
     } 
    }); 

No sé si está escrito correctamente, pero funciona;) ¡Gracias a todos por la ayuda!

Respuesta

115

Puede utilizar .is(':visible') para probar si algo es visible y .is(':hidden') para la prueba de lo contrario:

$('#offers').toggle(!$('#column-left form').is(':visible')); // or: 
$('#offers').toggle($('#column-left form').is(':hidden')); 

Referencia:

+1

Esto devuelve 'true' si el elemento es visible o' falso' si no lo es. Digno de notar.;) – Purag

+5

"para probar si" tipo de implica que devuelve un booleano;) – ThiefMaster

+0

@Purmou:! $ ('# Columna-left form'). Is (': visible') definitivamente devolverá un valor booleano sin embargo esta declaración está encerrado dentro de alternar, por lo tanto, debe lograr la salida deseada. –

2

tratar

if ($('#column-left form:visible').length > 0) { ... 
+0

No funcionará, incluso un objeto jQuery vacío evalúa 'verdadero' en un contexto booleano (' !! [] === verdadero'). Usted podría agregar '.length' para hacerlo funcionar., – ThiefMaster

+0

@ThiefMaster: He editado la respuesta de kontur, ¡así que ahora es correcto! – NickGreen

+1

Ty, se eliminó el voto negativo. Sin embargo, omitiría el '> 0' ya que la longitud nunca será negativa de todos modos. – ThiefMaster

1
$('#column-left form').hide(); 
$('.show-search').click(function() { 
    $('#column-left form').stop(true, true).slideToggle(300); //this will slide but not hide that's why 
    $('#column-left form').hide(); 
    if(!($('#column-left form').is(":visible"))) { 
     $("#offers").show(); 
    } else { 
     $('#offers').hide(); 
    } 
    }); 
4

sí se puede utilizar .is(':visible') en jQuery. Pero mientras el código se ejecuta bajo el navegador safari .is(':visible') no funcionará.

Así que por favor utilice el código de abajo

if($(".example").offset().top > 0) 

La línea anterior funcionará tanto en IE, así como Safari también.

0

Después de arreglar un problema de rendimiento en relación con el uso de .is ("Visible"), yo recomendaría en contra de las respuestas anteriores y en lugar de usar el código de jQuery para decidir si un solo elemento es visible:

$.expr.filters.visible($("#singleElementID")[0]); 

Lo que hace .is es comprobar si un conjunto de elementos está dentro de otro conjunto de elementos. Por lo tanto, buscará su elemento dentro del conjunto completo de elementos visibles en su página. Tener 100 elementos es bastante normal y puede tomar unos pocos milisegundos para buscar a través de la matriz de elementos visibles. Si está construyendo una aplicación web, probablemente tenga cientos o posiblemente miles. Nuestra aplicación a veces tomaba 100ms por $ ("# selector"). Is (": visible") ya que estaba comprobando si un elemento estaba en una matriz de otros 5000 elementos.

0

si es visible.

$("#Element").is(':visible'); 

si está oculto.

$("#Element").is(':hidden'); 
Cuestiones relacionadas