web-dev-qa-db-fra.com

changer le comportement de slideToggle () pour afficher: inline-block au lieu de display: block?

ma cible slideToggle () div doit être display:inline-block au lieu de display:block quand il est ouvert. Y a-t-il un moyen de changer le comportement jquery ici?

Éditer:

j'utilise jQuery 1.7.0 pour le moment. Également <div> est initialement à display:none et devrait s'étendre à display:inline-block après un clic sur un lien; mais apparemment, l'état par défaut de slideToggle () dans cette situation est display:block ...

jquerycssslidetoggle
37
iHaveacomputer

Un petit oiseau m'a dit ...

$('#my-block').slideToggle('medium', function() {
    if ($(this).is(':visible'))
        $(this).css('display','inline-block');
});
50
black

Essayez simplement de masquer votre bloc via des scripts (dont display:none via les styles)

HTML

<div class="ib">inline-block</div> <a href="#" class="toggle">toggle this</a>

CSS

.ib{
    display:inline-block;
    background:red;
}

Javascript

$(".ib").hide();
$(".toggle").bind("click", function(){
    $(".ib").slideToggle();
    return false;
})

exemple

12
fliptheweb

J'avais besoin de l'affichage : flex pour réorganiser les éléments avec la propriété order . Passer à l'affichage : flex a fonctionné mais il a fallu attendre la fin de l'animation pour réorganiser les éléments, donc il y a eu un moment où tout semblait clairement désordonné.

Qu'est-ce que l'astuce pour moi a été d'utiliser l'option de démarrage ( voir doc ):

$("your-selector").slideToggle({
  duration: 200,
  easing: "easeOutQuad",
  start: function() {
    jQuery(this).css('display','flex');
  }
});
4
Eloy Ruiz

Si vous voyez un "Flash de contenu non stylisé" indésirable, vous pouvez également utiliser un style en ligne. La sagesse habituelle de "ne pas mettre de style en ligne" est vraiment destinée à votre style principal, pas aux effets visuels (les effets JS ajoutent tous des styles en ligne après tout).

Bien sûr, le contenu ne sera pas vu par les araignées des moteurs de recherche désactivés JS, si cela est important. Si ce n'est pas important, c'est bon!

Mise à jour du violon de @ fliptheweb: http://jsfiddle.net/GregP/pqrdS/3/

4
Greg Pettit

Êtes-vous sur une ancienne version de jQuery? Cela aurait déjà dû être corrigé, voir la discussion ici:

http://bugs.jquery.com/ticket/2185

2
Alex Peattie