jQuery show () pour la classe css Twitter Bootstrap masquée

89

J'utilise Twitter Bootstrap et je remarque que jQuery show()ou fadeIn()ne fait pas apparaître l'élément DOM marqué avec une classe hiddencar les fonctions jQuery ne suppriment que la display: nonespécification. Cependant, le visibilityest toujours défini sur hidden.

Je me demande quelle est la meilleure façon de contourner ce problème?

  1. Supprimer la hiddenclasse sur l'élément
  2. Modifier la propriété de visibilité
  3. Écraser la classe cachée dans mon propre css

En particulier, je veux savoir si résoudre ce problème avec jQuery ou css est mieux et pourquoi.

jquery twitter-bootstrap Lim H.
la source
Je n'utilise généralement pas {visibilité: hidden} car il laisse l'élément dans le DOM pour prendre de l'espace. Y a-t-il une raison pour laquelle vous devez le faire?
isherwood
1
@isherwood Le visibility: hiddenest de bootstrap responsive.
Lim H.

Réponses:

124

La classe css que vous recherchez est .collapse. Cela définit l'élément surdisplay: none;

Donc, l'utilisation $('#myelement').show()fonctionnera correctement.

MISE À JOUR: Bootstrap v3.3.6 a mis à jour .collapse vers:

.collapse {
  display: none;
}
Eoinii
la source
2
Cela devrait être la réponse acceptée. Cela fonctionne également avec .slideDown(), .fadeIn()etc. .hiddendans Bootstrap est pour les choses que vous ne voulez jamais afficher.
snumpy
Est-ce nouveau dans bootstrap 3?
Lim H.
Non - je l'ai vu utilisé dans la documentation. <div class = "nav-collapse collapse"> Cette ligne est tirée d'exemples v2.3.2.
Eoinii
33
Malheureusement, cette réponse ne fonctionne plus avec Boostrap 3. définit .collapsemaintenant égalementvisibility: hidden;
Tom17
9
Fonctionne dans mon Bootstrap 3?
James McCormack
21

Cela fera fondre votre élément invisible et supprimera la classe

$('#element.hidden').css('visibility','visible').hide().fadeIn().removeClass('hidden');

http://jsfiddle.net/7qxVL/

Si vous n'avez pas vraiment besoin que l'élément soit invisible (c'est-à-dire qu'il prenne de l'espace), vous voudrez peut-être redéfinir .hidden (dans votre css local, ne changez pas la source d'amorçage, ou mieux encore, dans votre fichier LESS local).

David Fregoli
la source
Merci a travaillé pour moi! J'ai simplifié pour simplement faire :: fadeIn (). RemoveClass ('hidden') - pas besoin de manipuler directement le CSS ou de le cacher.
dbrin
1
Voir la réponse publiée par @IrishJoker. Vous ne devriez pas utiliser .hiddenpour les éléments que vous souhaitez afficher en utilisant javascript. Utilisez .collapseplutôt.
snumpy
13

Avertissement:

bootstrap 3.3.0 vient de changer .collapse en:

.collapse {
  display: none;
  visibility: hidden;
}

Ce qui est un changement radical pour jQuery.show (), j'ai dû revenir à l'inlining:

<div class="alert alert-danger" style="display:none;" >
</div>

pour continuer à utiliser jQuery comme suit:

$('.alert').html("Change a few things up and try submitting again.").show()

La seule classe que j'ai pu trouver dans bootstrap 3.3.0 pour appliquer simplement 'display: none' est

.navbar {
  display: none;
}
Ted Killilea
la source
1
Je ne vois pas de bonne raison pour que Bootstrap fasse cela. Personnellement, j'ai toujours un autre fichier css, utilisé pour «remplacer» les paramètres css - je remplacerais le .collapse pour n'avoir que le paramètre d'affichage. De cette façon, vous pouvez avancer sans vous soucier de tout casser. Douleur dans le message :(
Eoinii
La solution dans Bootstrap 3.3.x est d'utiliser .collapse('hide')et à la .collapse('show')place des méthodes de jQuery. Vous pouvez définir la visibilité initiale directement dans le HTML via la classe collapse(à masquer) ou collapse in(à afficher). Voir getbootstrap.com/javascript/#collapse .
alexw
La dernière version 3.3.6 a
annulé
5

J'ai eu le même problème. J'ai utilisé ce patch:

$(function() {
  $('.hidden').hide().removeClass('hidden');
});

Ensuite, j'ai eu un autre problème, car mon application génère de nouveaux éléments et les ajoute / les ajoute. Ce que j'ai finalement fait, c'est après avoir généré le nouvel élément que je fais:

var newEl = ...;
$(newEl).find('.hidden').hide().removeClass('hidden');
guyaloni
la source
4

Pour moi, c'était parce que bootstrap utilise le !importanthack pour cacher et masquer la classe.

Vous ne pouvez donc pas utiliser les show()méthodes etc fournies avec jquery. Au lieu de cela, vous devez écraser du code encore plus horrible en écrasant le code hacky.

$('#myelement').attr('style', 'display: block !important');

! important est une option de dernier recours et ne devrait vraiment pas être utilisé dans une bibliothèque principale comme bootstrap.

John Magnolia
la source
4

Cela fonctionne, mais je vais essayer la première réponse et changer les classes en .collapse.

.toggleClass('hidden')
Chloe
la source