IP Girl
  1. IP Girl
  3. jQuery show () pour Twitter Bootstrap classe css cachée
Intereting Posts
Comment scanner un dossier en Java? Qu’est-ce que la sérialisation d’objects? Meilleur moyen de sécuriser les données sensibles des applications Android? MISE À JOUR de plusieurs tables dans MySQL en utilisant LEFT JOIN Puis-je LINQ un JSON? Simulateur de robotique Est-il correct d’utiliser maintenant? pgadmin4: le serveur d’applications postgresql n’a pas pu être contacté. Java: HashMap ne fonctionne pas Symfony2 et Docsortingne – Erreur: PathExpression non valide. Doit être un StateFieldPathExpression Meilleure façon de lire le stream rss dans .net en utilisant C # Regarder le contenu des variables dans Eclipse IDE D’où viennent les parameters de ma configuration Git? Comment créer des exemples de données à partir de données privées (en remplaçant les noms de variables et les niveaux par des espaces réservés non informatifs)? Quelle Enum constante vais-je obtenir si les valeurs Enum sont identiques

jQuery show () pour Twitter Bootstrap classe css cachée

J’utilise Twitter Bootstrap et je remarque que jQuery show() ou fadeIn() ne fait pas apparaître l’élément DOM marqué par la classe hidden car les fonctions jQuery ne suppriment que l’ display: none spécification. Cependant, la visibility est toujours définie sur hidden .

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

  1. Supprimer la classe hidden sur l’élément
  2. Modifier la propriété de visibilité
  3. Ecraser la classe cachée dans mon propre css

En particulier, je veux savoir si corriger cela avec jQuery ou css est mieux et pourquoi.

La classe css que vous recherchez est .collapse . Cela définit l’élément à display: none;

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

UPDATE: Bootstrap v3.3.6 a mis à jour .collapse retour à: 

 .collapse { display: none; }

Cela va faire disparaître votre élément invisible et supprimer 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.-à-d. Occuper l’espace), vous pouvez redéfinir .hidden (dans votre css local, ne changez pas de source bootstrap, ou même mieux, dans votre fichier LESS local).

Attention:

bootstrap 3.3.0 vient de changer .collapse à: 

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

Ce qui est un changement radical pour jQuery.show (), je devais revenir à l’inlining:

continuer à utiliser jQuery comme suit: 

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

La seule classe que je pourrais trouver dans bootstrap 3.3.0 pour appliquer simplement “display: none” est 

 .navbar { display: none; }

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 créé le nouvel élément que je fais: 

 var newEl = ...; $(newEl).find('.hidden').hide().removeClass('hidden');

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

 .toggleClass('hidden')

Pour moi, c’est parce que le bootstrap utilise le hack !important pour les masques de classe et les masqués.

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

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

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