Cómo probar si DIV está abierto o cerrado después de slideToggle

Question

Tengo un botón Jquery Ui (#toggleIcons) que al hacer clic, alterna un div (.icons) para mostrar algunos iconos. También estoy usando Jquery Isotope e Infinitescroll para agregar nuevas imágenes dinámicamente. Lo que estoy tratando de hacer es tener una forma de retener el estado slideToggle a medida que se agregan y actualizan las nuevas imágenes. Ifinitescroll tiene una función de devolución de llamada para que pueda actualizar la página y el estado de los íconos.

//My button click function 
$("#styleSwitcher #toggleIcons").click(function() { 
    $('.icons').slideToggle('slow'); 
    //for Isotope to update the layout 
    $('#container').isotope('reLayout') 
    return false; 
}); 

//code I am working on to put in callback to test if div is open or closed 
if($(".icons").is(":hidden")) 
{ 
    $('.icons').hide(); 
} 
else 
{ 
    $('.icons').show(); 
} 

Not working. Cualquier ayuda o dirección sería apreciada. gracias

Answer 1

¿por qué no solo toggle o slideToggle?

$(".icons").toggle(); 

Answer 2

Usted tiene su condición al revés:

if($(".icons").is(":visible")) <----- 
    { 
$('.icons').hide(); 
    }  
else 
    { 
$('.icons').show(); 
    } 

Answer 3

me gustaría utilizar :visible

if($(".icons:visible").length > 0) 
    //item is visible 
else 
    //item is not visible 

pero si usted quiere meter a su código

if($(".icons").is(":hidden")) 

probablemente debería leer

if($(".icons").is(":hidden").length > 0) 

Answer 4

Creo que entiendo lo que quiere. desde algún botón, que no tiene nada que ver con la adición de imágenes, los usuarios pueden ocultar y mostrar íconos. Se agregan nuevas imágenes, con íconos "mostrando", y no tiene idea de la devolución de llamada si debe mostrar los íconos u ocultarlos para que coincidan con el resto de la galería. guión estado de comprobación

//My button click function 
$("#styleSwitcher #toggleIcons").click(function() { 
$('.icons').slideToggle('slow'); 
//for Isotope to update the layout 
$('#container').isotope('reLayout').data({iconStateIsHidden:$('.icons').is(":hidden")}); 
return false; 
}); 



//code I am working on to put in callback to test if div is open or closed 



     if($("#container").data()[iconStateIsHidden]) 
      { 
// newly added images should match the rest of the gallery 
     $('.icons').hide(); 
      }  
     else 
      { 
// newly added images should match the rest of the gallery 
     $('.icons').show(); 
      } 

Answer 5

poner en una función - deje que se mantenga un poco ..

$('.advance-view').click(function() { 
    $('#advance-control').slideToggle('slow', function() { 
     if ($('#advance-control').is(':hidden')) 
     { 
      $('.advance-view').css("background-color", "#2B509A"); 
     } 
     else 
     { 
      $('.advance-view').css("background-color", "#4D6837"); 
     } 
    });    
}); 

Answer 6

que estaba haciendo lo mismo, pero para una configuración basada en ID y luego me encontré funcionó cuando he utilizado este en su lugar

if ($(this).is(':hidden')) { 
    var state = "closed"; 
} else { 
    var state = "open"; 
} 

alert($(this).attr('id') + ' is ' + state); 
return false;