Existe-t-il un moyen en jQuery de cacher un élément, mais sans modifier le DOM lorsqu'il est caché ? Je cache un certain élément, mais lorsqu'il est caché, les éléments situés en dessous remontent. Je ne veux pas que cela se produise. Je veux que l'espace reste le même, mais que l'élément soit affiché/caché à volonté.
Je peux le faire ?
display: none; le sortira du flux de contenu et vous verrez votre autre contenu s'installer dans l'espace vide laissé derrière. ( display: block; le ramène dans le flux en poussant tout ce qui se trouve sur le chemin).
visibility: hidden; le maintiendra dans le flux de contenu en prenant de la place, mais le rendra simplement invisible. ( visibility: visible; le révèlera à nouveau).
Vous voudrez utiliser visibility si vous voulez que votre flux de contenu reste inchangé.
J'ai précédemment utilisé opacity: 0 avant de voir le visibility: hidden truc.
Mais dans de nombreux cas opacity: 0 est problématique, car il vous permet d'interagir avec l'élément même si vous ne pouvez pas le voir ! (Comme l'a fait remarquer DeadPassive .)
En général, ce n'est pas ce que vous voulez. Mais peut-être qu'à l'occasion, vous pourriez le faire ?
Vous ne pouvez pas interagir avec un élément caché, alors que vous pouvez le faire avec un élément dont l'opacité est nulle.
@joeytwiddle Je suis tombé par hasard sur votre réponse. J'avais besoin d'empêcher l'interaction avec un élément dans un certain état, tout en préservant son espace. J'étais conscient du fait que visibility : hidden préserverait l'espace, mais je ne savais pas que cela empêcherait l'interaction.
Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
0 votes
Pourquoi ne pas lui donner une largeur nulle ?
9 votes
@mrtsherman : la largeur zéro est déconseillée : de nombreux lecteurs d'écran (utilisés par les utilisateurs aveugles ou malvoyants) liront toujours le contenu qui est "caché" de cette manière, ce qui peut les perturber car on peut supposer que le contenu n'est pas censé être disponible à ce moment-là. L'utilisation de css visibility:hidden est la meilleure solution.
0 votes
Vous pouvez enregistrer la hauteur dynamiquement avant le fadeIn et le fadeOut de vos elems => voir en bas (je l'utilise dans une boucle de produits.) $('.or-woo-bt').parent().parent().hover(function() { // Préserver l'espace ; var rightHeight = $(this). height() ; $(this).css('height', rightHeight) ; // Hide ; $(this).parent().parent().find('a span.family-price').fadeOut() ; }, function() { // Show ; $(this).parent().parent().find('a span.family-price').fadeIn('slow') ; }) ;