jQuery show () pour Twitter Bootstrap css class hidden

Question

Je suis en utilisant Twitter Bootstrap et je remarque que jQuery show() ou fadeIn() ne font pas d'élément DOM marqué avec la classe hidden , car les fonctions jQuery seulement supprimer l' display: none de la spécification. Cependant, l' visibility est toujours à la hidden.

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

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

En particulier, je veux savoir si la fixation de ce avec jQuery ou css est mieux et pourquoi.

Answer 1

La classe de CSS que vous recherchez est .collapse . Ceci définit l'élément sur display: none;

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

Answer 2

Cela va fondre votre élément invisible et enlever 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 occupez de l'espace), vous voudrez peut-être redéfinir .hidden (dans votre css local, ne changez pas la source bootstrap, ou mieux encore, dans votre fichier LESS local).

Answer 3

Attention:

bootstrap 3.3.0 vient de changer .collapse en:

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

Ce qui est un changement décisif pour jQuery.show (), je devais revenir à l'inline:

 <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 n’applique que «display: none» est

 .navbar {
  display: none;
}
 

Answer 4

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 au début. 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');
 

Answer 5

Pour moi, c’est parce que bootstrap utilise le hack !important pour les classes hide et hidden.

Vous ne pouvez donc pas utiliser les méthodes show() etc. fournies avec jquery. Au lieu de cela, vous devez écraser un 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 en aucun cas être utilisé dans une bibliothèque principale telle que bootstrap.