Disons que je crée un élément HTML comme celui-ci,

<div id="my-div" class="hidden">Hello, TB3</div>
<div id="my-div" class="hide">Hello, TB4</div>
<div id="my-div" class="d-none">Hello, TB4</div>

Comment pourrais-je montrer et cacher cet élément HTML de jQuery / Javascript.

JavaScript:

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

Résultat: (avec l'un d'eux).

J'aimerais que les éléments ci-dessus soient cachés.

Quel est le moyen le plus simple de masquer un élément à l'aide de Bootstrap et de l'afficher à l'aide de jQuery?

La bonne réponse

Bootstrap 4.x

Bootstrap 4.x utilise la nouvelle .d-noneclasse . Au lieu d'utiliser l' un .hidden ou l' autre , ou .hidesi vous utilisez Bootstrap 4.x, utilisez .d-none.

<div id="myId" class="d-none">Foobar</div>

• Pour le montrer: $("#myId").removeClass('d-none');
• Pour le cacher: $("#myId").addClass('d-none');
• Pour le basculer: $("#myId").toggleClass('d-none');

(grâce au commentaire de Fangming)

Bootstrap 3.x

Tout d'abord, ne l'utilisez pas .hide! Utilisez .hidden. Comme d'autres l'ont dit, .hideest obsolète,

.hide est disponible, mais il n'affecte pas toujours les lecteurs d'écran et est obsolète à partir de la v3.0.1

Deuxièmement, utilisez .toggleClass () , .addClass () et .removeClass () de jQuery

<div id="myId" class="hidden">Foobar</div>

• Pour le montrer: $("#myId").removeClass('hidden');
• Pour le cacher: $("#myId").addClass('hidden');
• Pour le basculer: $("#myId").toggleClass('hidden');

N'utilisez pas la classe css .show, elle a un très petit cas d'utilisation. Les définitions de show, hiddenet invisiblesont dans les documents .

// Classes
.show {
  display: block !important;
}
.hidden {
  display: none !important;
  visibility: hidden !important;
}
.invisible {
  visibility: hidden;
}

Simplement:

$(function(){
  $("#my-div").removeClass('hide');
});

Ou si vous voulez que la classe soit toujours là:

$(function(){
  $("#my-div").css('display', 'block !important');
});

Utilisez bootstrap .collapse au lieu de .hidden

Plus tard dans JQuery, vous pouvez utiliser .show () ou .hide () pour le manipuler

Cette solution est déconseillée. Utilisez la solution la plus votée.

La hideclasse est utile pour garder le contenu caché lors du chargement de la page.

Ma solution à cela est lors de l'initialisation, passez à masquer jquery:

$('.targets').hide().removeClass('hide');

Ensuite, show()et hide()devrait fonctionner normalement.

Une autre façon de résoudre ce problème est de créer votre propre classe CSS qui ne définit pas le! Important à la fin de la règle, comme ceci:

.hideMe {
    display: none;
}

et utilisé comme ça:

<div id="header-mask" class="hideMe"></div>

et maintenant jQuery cache des travaux

$('#header-mask').show();

La méthode @ dustin-graham décrite est la façon dont je le fais aussi. Rappelez-vous également que bootstrap 3 utilise désormais "caché" au lieu de "masquer" selon leur documentation sur getbootstrap . Je ferais donc quelque chose comme ceci:

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

Ensuite, chaque fois que vous utilisez jQuery show()et les hide()méthodes, il n'y aura pas de conflit.

Initiez l'élément avec comme tel:

<div id='foo' style="display: none"></div>

Et puis, utilisez l'événement que vous souhaitez afficher, comme tel:

$('#foo').show();

La façon la plus simple d'aller, je crois.

HTML:

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

Javascript:

$(function(){
    //If the HIDE class exists then remove it, But first hide DIV
    if ( $("#my-div").hasClass( 'hide' ) ) $("#my-div").hide().removeClass('hide');

    //Now, you can use any of these functions to display
    $("#my-div").show();
    //$("#my-div").fadeIn();
    //$("#my-div").toggle();
});

J'aime utiliser le toggleClass:

var switch = true; //it can be an JSON value ...
$("#my-div").toggleClass('hide', switch);

$(function(){

$("#my-div").toggle();

$("#my-div").click(function(){$("#my-div").toggle()})

})

// vous n'avez même pas besoin de définir le #my-div .hideni !important, il suffit de coller / répéter la bascule dans la fonction d'événement.

J'ai récemment rencontré ce problème lors de la mise à niveau de la version 2.3 vers la version 3.1; nos animations jQuery ( slideDown ) se sont cassées parce que nous mettions masquer les éléments dans le modèle de page. Nous avons opté pour la création de versions à espacement des noms des classes Bootstrap qui portent désormais la règle laide !

.rb-hide { display: none; }
.rb-pull-left { float: left; }
etc...

La réponse de Razz est bonne si vous êtes prêt à réécrire ce que vous avez fait.

Était dans le même problème et a travaillé avec les éléments suivants:

/**
 * The problem: https://github.com/twbs/bootstrap/issues/9881
 * 
 * This script enhances jQuery's methods: show and hide dynamically.
 * If the element was hidden by bootstrap's css class 'hide', remove it first.
 * Do similar in overriding the method 'hide'.
 */
!function($) {
    "use strict";

    var oldShowHide = {'show': $.fn.show, 'hide': $.fn.hide};
    $.fn.extend({
        show: function() {
            this.each(function(index) {
                var $element = $(this);
                if ($element.hasClass('hide')) {
                    $element.removeClass('hide');
                }
            });
            return oldShowHide.show.call(this);
        },
        hide: function() {
            this.each(function(index) {
                var $element = $(this);
                if ($element.hasClass('show')) {
                    $element.removeClass('show');
                }
            });
            return oldShowHide.hide.call(this);
        }
    });
}(window.jQuery);

Jetez-le lorsque Bootstrap est livré avec un correctif pour ce problème.

Dans bootstrap 4, vous pouvez utiliser la d-noneclasse pour masquer complètement un élément. https://getbootstrap.com/docs/4.0/utilities/display/

Mise à jour : Désormais, j'utilise .collapseet $('.collapse').show().

Pour Bootstrap 4 Alpha 6

Pour Bootstrap 4, vous devez utiliser .hidden-xs-up.

https://v4-alpha.getbootstrap.com/layout/responsive-utilities/#available-classes

Les classes .hidden - * - up masquent l'élément lorsque la fenêtre est au point d'arrêt donné ou plus large. Par exemple, .hidden-md-up masque un élément dans les fenêtres moyennes, grandes et extra-grandes.

Il existe également un hiddenattribut HTML5.

https://v4-alpha.getbootstrap.com/content/reboot/#html5-hidden-attribute

HTML5 ajoute un nouvel attribut global nommé [caché], qui a le style d'affichage: aucun par défaut. En empruntant une idée de PureCSS, nous améliorons cette valeur par défaut en rendant [hidden] {display: none! Important; } pour éviter que son affichage ne soit accidentellement remplacé. Bien que [caché] ne soit pas pris en charge nativement par IE10, la déclaration explicite dans notre CSS contourne ce problème.

<input type="text" hidden>

Il y a aussi .invisiblece qui affecte la mise en page.

https://v4-alpha.getbootstrap.com/utilities/invisible-content/

La classe .invisible peut être utilisée pour basculer uniquement la visibilité d'un élément, ce qui signifie que son affichage n'est pas modifié et que l'élément peut toujours affecter le flux du document.

hide et hidden sont tous deux obsolètes et supprimés plus tard, n'existent plus dans les nouvelles versions. Vous pouvez utiliser les classes d-none / d-sm-none / invisible etc. en fonction de vos besoins. La raison probable de leur suppression est que caché / masqué est un peu déroutant dans le contexte CSS. En CSS, cacher (caché) est utilisé pour la visibilité, pas pour l'affichage. la visibilité et l'affichage sont des choses différentes.

Si vous avez besoin d'une classe de visibilité: cachée, vous avez besoin d'une classe invisible des utilitaires de visibilité.

Vérifiez ci-dessous les utilitaires de visibilité et d'affichage:

https://getbootstrap.com/docs/4.1/utilities/visibility/

https://getbootstrap.com/docs/4.1/utilities/display/

Utilisez l'extrait de code suivant pour Bootstrap 4, qui étend jQuery:

(function( $ ) {

    $.fn.hideShow = function( action ) {

        if ( action.toUpperCase() === "SHOW") {
            // show
            if(this.hasClass("d-none"))
            {
                this.removeClass("d-none");
            }

            this.addClass("d-block");

        }

        if ( action.toUpperCase() === "HIDE" ) {
            // hide
            if(this.hasClass("d-block"))
            {
                this.removeClass("d-block");
            }

            this.addClass("d-none");
      }

          return this;
    };

}( jQuery ));

1. Mettez le code ci-dessus dans un fichier. Supposons que "myJqExt.js"

2. Incluez le fichier une fois que jQuery a été inclus.

3. Utilisez-le en utilisant la syntaxe

   $ (). hideShow ('hide');

   $ (). hideShow ('show');

j'espère que vous les trouverez utiles. :-)

Bootstrap, JQuery, namespaces ... Quel est le problème avec un simple:

var x = document.getElementById('my-div');
x.className.replace(/\bhide\b/, ''); //remove any hide class
x.style.display = ''; //show
x.style.display = 'none'; //hide

Vous pouvez créer une petite fonction d'aide, compatible KISS:

function mydisplay(id, display) {
    var node = (typeof id == 'string') ? document.getElementById(id) : id;
    node.className.replace(/\bhide\b/, '');
    if (node) {
        if (typeof display == 'undefined') {
            display = (node.style.display != 'none');
        } else if (typeof display == 'string' && display == 'toggle') {
            display = mydisplay(node, !mydisplay(node));
        } else {
            node.style.display = (display) ? '' : 'none';
        }
    }
    return display;
}
is_hidden = mydisplay('my-div'); //actual state
mydisplay('my-div', false); //hide
mydisplay('my-div', true); //show
mydisplay('my-div', 'toggle'); //toggle state

Sur la base des réponses ci-dessus, je viens d'ajouter mes propres fonctions et cela n'entre pas en conflit avec les fonctions jquery disponibles comme .hide (), .show (), .toggle (). J'espère que ça aide.

    /*
     * .hideElement()
     * Hide the matched elements. 
     */
    $.fn.hideElement = function(){
        $(this).addClass('hidden');
        return this;
    };

    /*
     * .showElement()
     * Show the matched elements.
     */
    $.fn.showElement = function(){
        $(this).removeClass('hidden');
        return this;
    };

    /*
     * .toggleElement()
     * Toggle the matched elements.
     */
    $.fn.toggleElement = function(){
        $(this).toggleClass('hidden');
        return this;
    };

J'ai résolu mon problème en éditant le fichier CSS Bootstrap, voir leur doc:

.cacher:

.hide is available, but it does not always affect screen readers and is deprecated as of v3.0.1

.hide {
  display: none !important;
}

.hidden est ce que nous sommes censés utiliser maintenant, mais c'est en fait:

.hidden {
  display: none !important;
  visibility: hidden !important;
}

Le jQuery "fadeIn" ne fonctionnera pas à cause de la "visibilité".

Ainsi, pour le dernier Bootstrap, .hide n'est plus utilisé, mais il est toujours dans le fichier min.css. j'ai donc laissé .hidden AS IS et j'ai juste supprimé le "! important" de la classe ".hide" (qui est de toute façon obsolète). mais vous pouvez également le remplacer dans votre propre CSS, je voulais juste que toute mon application agisse de la même façon, j'ai donc changé le fichier CSS Bootstrap.

Et maintenant le jQuery "fadeIn ()" fonctionne.

La raison pour laquelle j'ai fait cela par rapport aux suggestions ci-dessus, c'est que lorsque vous "removeClass ('. Hide')", l'objet est immédiatement affiché et vous ignorez l'animation :)

J'espère que cela a aidé les autres.

☀️ La réponse la plus juste

Dans Bootstrap 4, vous masquez l'élément:

<p id="insufficient-balance-warning" class="d-none alert alert-danger">Pay me</p>

🛑 Ensuite, bien sûr, vous pouvez littéralement le montrer avec:

if (pizzaFundsAreLow) {
  $('#insufficient-balance-warning').removeClass('d-none');
}

💓 Mais si vous le faites de manière sémantique, en transférant la responsabilité de Bootstrap à jQuery, vous pouvez utiliser d'autres subtilités jQuery comme la décoloration:

if (pizzaFundsAreLow) {
  $('#insufficient-balance-warning').hide().removeClass('d-none').fadeIn();
}

Twitter Bootstrap fournit des classes pour basculer le contenu, voir https://github.com/twbs/bootstrap/blob/3ee5542c990817324f0a07b97d01d1fe206fd8d6/less/utilities.less .

Je suis complètement nouveau sur jQuery, et après avoir lu leurs documents, je suis arrivé à une autre solution pour combiner Twitter Bootstrap + jQuery.

Tout d'abord, la solution pour «masquer» et «afficher» un élément (classe wsis-collapse) lorsque vous cliquez sur un autre élément (classe wsis-toggle), consiste à utiliser .toggle .

jQuery(document).ready(function() {
    jQuery(".wsis-toggle").click(function(){
        jQuery(".wsis-collapse").toggle();
    });
});

Vous avez déjà masqué l'élément .wsis-collapseen utilisant .hiddenégalement la classe Twitter Bootstrap (V3) :

.hidden {
  display: none !important;
  visibility: hidden !important;
}

Lorsque vous cliquez sur .wsis-toggle, le jQuery ajoute un style en ligne:

display: block

En raison de !importantdans le Bootstrap Twitter, ce style en ligne n'a aucun effet, nous devons donc supprimer la .hiddenclasse, mais je ne le recommanderai pas .removeClasspour cela! Parce que lorsque jQuery va à nouveau cacher quelque chose, il ajoute également un style en ligne:

display: none

Ce n'est pas la même chose que la classe .hidden de Twitter Bootstrap, qui est également optimisée pour AT (lecteurs d'écran). Donc, si nous voulons montrer le div caché, nous devons nous débarrasser de la .hiddenclasse de Twitter Bootstrap, donc nous nous débarrassons des déclarations importantes, mais si nous le cachons à nouveau, nous voulons .hiddenrécupérer la classe! Nous pouvons utiliser [.toggleClass] [3] pour cela.

jQuery(document).ready(function() {
    jQuery(".wsis-toggle").click(function(){
        jQuery(".wsis-collapse").toggle().toggleClass( "hidden" );
    });
});

De cette façon, vous continuez à utiliser la classe cachée chaque fois que le contenu est masqué.

La .showclasse en TB est en fait la même que le style en ligne de jQuery, les deux 'display: block'. Mais si la .showclasse à un moment donné sera différente, vous ajoutez simplement cette classe également:

jQuery(document).ready(function() {
    jQuery(".wsis-toggle").click(function(){
        jQuery(".wsis-collapse").toggle().toggleClass( "hidden show" );
    });
});