Diciamo che creo un elemento HTML come questo,

<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>

Come potrei mostrare e nascondere quell'elemento HTML da jQuery / Javascript.

JavaScript:

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

Risultato: (con uno di questi).

Vorrei che gli elementi sopra fossero nascosti.

Qual è il modo più semplice per nascondere l'elemento usando Bootstrap e mostrarlo usando jQuery?

La risposta giusta

Bootstrap 4.x

Bootstrap 4.x utilizza la nuova .d-noneclasse . Invece di usare uno dei due.hidden , o .hidese stai usando Bootstrap 4.x usa .d-none.

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

• Per mostrarlo: $("#myId").removeClass('d-none');
• Per nasconderlo: $("#myId").addClass('d-none');
• Per attivarlo: $("#myId").toggleClass('d-none');

(grazie al commento di Fangming)

Bootstrap 3.x

Primo, non usare .hide! Usa .hidden. Come altri hanno già detto, .hideè deprecato,

.hide è disponibile, ma non influisce sempre sugli screen reader ed è obsoleto a partire dalla v3.0.1

In secondo luogo, utilizzare .toggleClass () , .addClass () e .removeClass () di jQuery

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

• Per mostrarlo: $("#myId").removeClass('hidden');
• Per nasconderlo: $("#myId").addClass('hidden');
• Per attivarlo: $("#myId").toggleClass('hidden');

Non usare la classe css .show, ha un caso d'uso molto piccolo. Le definizioni di show, hiddene invisiblesono nei documenti .

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

Semplicemente:

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

O se in qualche modo vuoi che la classe sia ancora lì:

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

Usa bootstrap .collapse invece di .hidden

Più tardi in JQuery puoi usare .show () o .hide () per manipolarlo

Questa soluzione è obsoleta. Usa la soluzione più votata.

La hideclasse è utile per mantenere nascosto il contenuto al caricamento della pagina.

La mia soluzione a questo è durante l'inizializzazione, passa a hide di jquery:

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

Quindi show()e hide()dovrebbe funzionare normalmente.

Un altro modo per affrontare questo fastidio è creare la tua classe CSS che non imposti il! Important alla fine della regola, in questo modo:

.hideMe {
    display: none;
}

e usato così:

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

e ora nasconde jQuery funziona

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

Il metodo @ dustin-graham delineato è come lo faccio anch'io. Ricorda anche che bootstrap 3 ora usa "nascosto" invece di "nascondi" secondo la loro documentazione su getbootstrap . Quindi farei qualcosa del genere:

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

Quindi, ogni volta che si utilizzano jQuery show()e i hide()metodi, non si verificheranno conflitti.

Inizia l'elemento con come tale:

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

E quindi, usa l'evento che vuoi mostrare, come tale:

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

Il modo più semplice di andare credo.

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();
});

Mi piace usare il 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()})

})

// non è nemmeno necessario impostare #my-div .hidené !important, basta incollare / ripetere l'interruttore nella funzione evento.

Di recente mi sono imbattuto in questo durante l'aggiornamento da 2.3 a 3.1; le nostre animazioni jQuery ( slideDown ) si sono interrotte perché nascondevamo gli elementi nel modello di pagina. Abbiamo intrapreso la strada della creazione di versioni spaziate dal nome delle classi Bootstrap che ora portano la brutta ! Importante regola.

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

La risposta di Razz è buona se sei disposto a riscrivere ciò che hai fatto.

Era nello stesso problema e ha risolto con il seguente:

/**
 * 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);

Buttalo via quando Bootstrap viene fornito con una soluzione per questo problema.

In bootstrap 4 puoi usare d-noneclass per nascondere completamente un elemento. https://getbootstrap.com/docs/4.0/utilities/display/

Aggiornamento : da ora in poi, utilizzo .collapsee $('.collapse').show().

Per Bootstrap 4 Alpha 6

Per Bootstrap 4 devi usare .hidden-xs-up.

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

Le classi .hidden - * - up nascondono l'elemento quando il viewport è nel punto di interruzione dato o più ampio. Ad esempio, .hidden-md-up nasconde un elemento su finestre medie, grandi ed extra-grandi.

C'è anche l' hiddenattributo HTML5.

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

HTML5 aggiunge un nuovo attributo globale chiamato [nascosto], che è designato come display: nessuno per impostazione predefinita. Prendendo in prestito un'idea da PureCSS, miglioriamo questo default rendendo [nascosto] {display: none! Important; } per evitare che il display venga sovrascritto accidentalmente. Mentre [nascosto] non è supportato nativamente da IE10, la dichiarazione esplicita nel nostro CSS aggira quel problema.

<input type="text" hidden>

C'è anche .invisibleciò che influisce sul layout.

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

La classe .invisible può essere utilizzata per attivare solo la visibilità di un elemento, il che significa che la sua visualizzazione non viene modificata e l'elemento può comunque influenzare il flusso del documento.

hide e hidden sono entrambi deprecati e successivamente rimossi, non esistono più nelle nuove versioni. Puoi usare le classi d-none / d-sm-none / invisible etc a seconda delle tue esigenze. Il probabile motivo per cui sono stati rimossi è perché nascosto / nascosto è un po 'confuso nel contesto CSS. Nei CSS, nascondere (nascosto) viene utilizzato per la visibilità, non per la visualizzazione. visibilità e visualizzazione sono cose diverse.

Se hai bisogno di una classe per la visibilità: nascosto, allora hai bisogno di una classe invisibile dalle utility di visibilità.

Controlla sotto sia la visibilità che le utility di visualizzazione:

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

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

Utilizzare il frammento seguente per Bootstrap 4, che estende 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. Inserisci il codice sopra in un file. Supponiamo che "myJqExt.js"

2. Includi il file dopo aver incluso jQuery.

3. Usalo usando la sintassi

   $ () NascondiMostra ( 'nascondere').;

   $ () NascondiMostra ( 'show').;

spero che lo troviate utile. :-)

Bootstrap, JQuery, namespace ... Cosa c'è di sbagliato in un semplice:

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

Puoi creare una piccola funzione di aiuto, conforme a 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

Sulla base delle risposte di cui sopra, ho appena aggiunto le mie funzioni e ciò non è in conflitto con le funzioni jquery disponibili come .hide (), .show (), .toggle (). Spero che sia d'aiuto.

    /*
     * .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;
    };

Ho risolto il mio problema modificando il file CSS Bootstrap, vedere il loro documento:

.nascondere:

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

.hide {
  display: none !important;
}

.hidden è ciò che supponiamo di usare ora, ma in realtà è:

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

"FadeIn" di jQuery non funzionerà a causa della "visibilità".

Quindi, per l'ultimo Bootstrap, .hide non è più in uso, ma è ancora nel file min.css. così ho lasciato .hidden così com'è e ho appena rimosso il "! important" dalla classe ".hide" (che dovrebbe essere comunque deprecato). ma puoi anche sovrascriverlo nel tuo CSS, volevo solo che la mia applicazione funzionasse allo stesso modo, quindi ho cambiato il file CSS Bootstrap.

E ora funziona jQuery "fadeIn ()".

Il motivo per cui l'ho fatto rispetto ai suggerimenti sopra, è perché quando "removeClass ('. Hide')" viene immediatamente mostrato l'oggetto e salti l'animazione :)

Spero che abbia aiutato gli altri.

☀️ La risposta più giusta

In Bootstrap 4 nascondi l'elemento:

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

🛑 Quindi, certo, potresti letteralmente mostrarlo con:

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

💓 Ma se lo fai in modo semantico, trasferendo la responsabilità da Bootstrap a jQuery, puoi usare altre bellezze di jQuery come lo sbiadimento:

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

Twitter Bootstrap offre classi per attivare / disattivare il contenuto, consultare https://github.com/twbs/bootstrap/blob/3ee5542c990817324f0a07b97d01d1fe206fd8d6/less/utilities.less .

Sono completamente nuovo in jQuery e dopo aver letto i loro documenti sono arrivato a un'altra soluzione per combinare Twitter Bootstrap + jQuery.

Innanzitutto, la soluzione per "nascondere" e "mostrare" un elemento (classe wsis-collapse) quando si fa clic su un altro elemento (classe wsis-toggle), è usare .toggle .

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

Hai già nascosto l'elemento .wsis-collapseutilizzando Twitter Bootstrap (V3) .hiddenanche in classe :

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

Quando fai clic su .wsis-toggle, jQuery aggiunge uno stile in linea:

display: block

A causa del !importantBootstrap di Twitter, questo stile in linea non ha alcun effetto, quindi dobbiamo rimuovere la .hiddenclasse, ma non lo consiglierò .removeClassper questo! Perché quando jQuery nasconderà di nuovo qualcosa, aggiunge anche uno stile in linea:

display: none

Questo non è lo stesso della classe .hidden di Twitter Bootstrap, che è ottimizzata anche per AT (screen reader). Quindi, se vogliamo mostrare il div nascosto, dobbiamo sbarazzarci della .hiddenclasse di Twitter Bootstrap, quindi eliminiamo le dichiarazioni importanti, ma se lo nascondiamo di nuovo, vogliamo che la .hiddenclasse torni di nuovo! Per questo possiamo usare [.toggleClass] [3].

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

In questo modo continui a utilizzare la classe nascosta ogni volta che il contenuto è nascosto.

La .showclasse in TB è in realtà la stessa dello stile inline di jQuery, entrambi 'display: block'. Ma se la .showclasse ad un certo punto sarà diversa, allora aggiungerai semplicemente anche questa classe:

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