Comment faire pour masquer l’élément à l’aide de twitter bootstrap 3 et l’afficher à l’aide de jQuery ?

Question

Avec Twitter Bootstrap 3 et jQuery 2.0.3

HTML:

<div id="my-div" class="hide">Hello, TB3</div>

Javascript:

$(function(){
  $("#my-div").show();
});

Résultat:

Invisible mon-div

<div id="my-div" class="hide" style="display: block;">Hello, TB3</div>

La raison:

.hide {
    display: none !important;
}

bootstrap.min.js, ligne 9

Question:

Quelle est la façon la plus simple de cacher l'élément à l'aide de Bootstrap3, et le montrer à l'aide de jQuery?

Answer 1

Il suffit de :

Ou si vous voulez en quelque sorte la classe de toujours être là :

Answer 2

Le `` classe est utile pour garder le contenu caché sur le chargement de la page.

Ma solution consiste pendant l’initialisation, passer à masquer de jquery :

Puis et devraient fonctionner normalement.

Answer 3

Une autre façon d’aborder ce désagrément est de créer votre propre classe CSS qui ne définit pas le ! important à la fin de la règle, comme ceci :

et utilisé comme suit :

et maintenant jQuery cacher des œuvres

Answer 4

La méthode @dustin-graham décrit, c’est comment je le fais trop. N’oubliez pas aussi que 3 bootstrap utilise désormais « caché » plutôt que « masquer » conformément à leur documentation à getbootstrap. Donc, je ferais quelque chose comme ceci :

Puis chaque fois que l’utilisation de jQuery et méthodes, il n’y aura aucun conflit.

Answer 5

J’aime utiliser le toggleClass :