web-dev-qa-db-fra.com

Comment tester si DIV est ouvert ou fermé après slideToggle

J'ai un bouton Jquery Ui (#toggleIcons) qui permet de basculer un div (.icons) pour afficher des icônes. J'utilise également Jquery Isotope et Infinitescroll pour ajouter de nouvelles images de manière dynamique. Ce que j'essaie de faire, c'est de pouvoir conserver l'état de slideToggle au fur et à mesure que les nouvelles images sont ajoutées et mises à jour. Ifinitescroll a une fonction de rappel afin que je puisse mettre à jour la page et l'état des icônes.

//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();
}

Ne fonctionne pas Toute aide ou orientation serait appréciée. Merci

jqueryif-statementslidetoggle
14
Macsupport

Vous avez votre condition à l'envers:

if ($(".icons").is(":visible")) { <-----
  $('.icons').hide(); 
} else {
  $('.icons').show(); 
}
23
Mike Gleason jr Couturier

Mettez le script d’état de contrôle dans une fonction - laissez-le tenir un peu ..

$('.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");
        }
    });             
});
20
Ryan Harne

pourquoi ne pas simplement basculer ou slideToggle it?

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

Je voudrais utiliser :visible

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

mais si vous voulez coller à votre code

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

devrait probablement lire

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

je faisais la même chose mais pour une configuration basée sur un identifiant, puis j'ai trouvé que cela fonctionnait quand j'ai utilisé cela 

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

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

je pense que je comprends ce que tu veux. à partir d’un bouton qui n’a rien à voir avec l’ajout d’images, les utilisateurs peuvent masquer et afficher des icônes. De nouvelles images sont ajoutées, avec les icônes "montrant", et vous ne savez pas, lors du rappel, si vous devez afficher les icônes ou les masquer afin qu'elles correspondent au reste de la galerie.

//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(); 
          }
0
DefyGravity