jQuery Afficher/Masquer - CSS pour afficher des valeurs affectent ma mise en page
jQuery utilise le CSS display
propriété sous le capot de la simple show()
et hide()
fonctions. Le code HTML suivant comprend trois boutons, chacun enveloppé dans un <span>
tag, et tous les trois <span>
balises sont placées dans un parent <div>
conteneur. Au chargement de la page, le <span>
balises sont masqués à l'aide de jQuery hide()
, et, à un certain moment plus tard, ils sont affichés à l'aide de la show()
fonction. Le HTML est maintenant dans l'état suivant avec le <span>
balise ayant reçu la valeur de style display: block;
.
<div style="text-align:right; width:100%;">
<span style="display:block">
<input type="button" value="Button1" />
</span>
<span style="display:block">
<input type="button" value="Button2" />
</span>
<span style="display:block">
<input type="button" value="Button3" />
</span>
</div>
Dans Firefox (3.5) la durée d'apparition des éléments empilés verticalement les uns au dessus des autres, alors que dans IE qu'ils apparaissent en ligne. Je me serais attendu à ce dernier dans les deux navigateurs, car je pensais que la mise en page par défaut pour les balises span est en ligne.
Si je modifier manuellement le style de display:block
à display: inline;
, il semble correct dans Firefox. Essentiellement, lors de l'affichage d'un élément, à l'aide de jQuery est une valeur pour display
qui n'est pas toujours valable. L'ajout de display: block
; est suffisant pour montrer un élément, mais pas assez pour montrer avec la ligne de mise en page j'ai besoin d'.
Donc, mes questions:
- Est-ce un problème connu avec jQuery? Je suis à l'aide de jQuery 1.2.6.
- Quelqu'un a rencontré ce problème avant, et comment avez-vous entoure?
OriginalL'auteur Andy McCluggage | 2009-11-16
Vous devez vous connecter pour publier un commentaire.
Au début, il semblait, d'après les réponses à l'aide de l'option afficher/masquer les fonctions ne serait pas possible si je voulais une valeur de
display
autres queblock
.Cependant, j'ai alors remarqué que, lorsque le
<span>
les balises ont été dans l'état caché, jQuery avait ajouté un attribut appeléoldBlock
à chacun d'eux. J'ai alors réalisé que c'était pour le stockage temporaire de l'display
valeur CSS lorsque l'élément est caché, de sorte que la valeur appropriée peut être rétablie lorsque les éléments sont présentés de nouveau.Tous j'ai donc avez à faire est de définir la valeur appropriée pour l'affichage avant de me cacher les éléments.
État Initial:
Appel
.hide()
nous amène à cet état:Appel
show()
nous ramène à cet état:Le principal problème était que je n'avais PAS le
<span>
éléments d'une valeur dedisplay
dans mon état initial. Elles seraient donc implicitement recevoir le navigateur par défaut, ce qui semble êtreinline
comme je m'y attendais. Cependant, jQuery utilise seulement l'oldBlock
attribut si vous définissez explicitement la valeur dedisplay
avant vous appelez lahide()
fonction. Si il n'y a pas deoldBlock
attribut, leshow()
fonction utilise la valeur par défaut deblock
.Drive-by en bas de vote?
OriginalL'auteur Andy McCluggage
Au lieu de l'utilisation afficher/masquer l'utilisation addClass/removeClass et le style que vous souhaitez être appliqué mis en place en utilisant la classe.
Exemple d'utilisation:
le problème avec cette approche est, fondamentalement, c'est un hack. votre code sachant trop sur votre css. oui, il peut certainement travailler parfois, mais j'essaie d'éviter autant que possible
OriginalL'auteur tvanfosson
Je n'ai pas eu ce problème, mais si vous en avez besoin, vous pouvez définir explicitement les propriétés css comme ceci:
OriginalL'auteur Nathan Long
Je n'ai pas eu ce problème spécifique, mais pour plus d'en contrôler l'utilisation .toggleClass()
C'est très bien, mais show() et hide() impliquent une certaine animation, et sont interchangeables avec des trucs comme slideDown et slideUp, donc si il veut garder l'animation, en changeant simplement la classe ne le ferais pas.
Je ne suis pas sûr si c'est possible à tous d'animer des éléments inline.
OriginalL'auteur ScottE