Wie verstecke ich ein Element mit Twitter Bootstrap und zeige es mit jQuery?


235

Angenommen, ich erstelle ein solches HTML-Element.

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

Wie kann ich dieses HTML-Element in jQuery / Javascript ein- und ausblenden?

JavaScript:

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

Ergebnis: (mit einem dieser).

Ich möchte, dass die obigen Elemente ausgeblendet werden.

Was ist der einfachste Weg, um Elemente mit Bootstrap auszublenden und mit jQuery anzuzeigen?


Um diese Frage relevant zu halten, habe ich sie so geändert, dass sie auf beiden Bootstraps funktioniert, da die Antwort nur einen Unterschied im Klassennamen darstellt.
Evan Carroll

Antworten:


392

Die richtige Antwort

Bootstrap 4.x.

Bootstrap 4.x verwendet die neue .d-noneKlasse . Anstatt entweder .hidden oder .hidewenn Sie Bootstrap 4.x verwenden, verwenden Sie .d-none.

<div id="myId" class="d-none">Foobar</div>
  • Um es zu zeigen: $("#myId").removeClass('d-none');
  • Um es zu verbergen: $("#myId").addClass('d-none');
  • Um es umzuschalten: $("#myId").toggleClass('d-none');

(danke an den Kommentar von Fangming)

Bootstrap 3.x.

Erstens nicht verwenden .hide! Verwenden Sie .hidden. Wie andere gesagt haben, .hideist veraltet,

.hide ist verfügbar, wirkt sich jedoch nicht immer auf Bildschirmleseprogramme aus und ist ab Version 3.0.1 veraltet

Verwenden Sie zweitens .toggleClass () , .addClass () und .removeClass () von jQuery.

<div id="myId" class="hidden">Foobar</div>
  • Um es zu zeigen: $("#myId").removeClass('hidden');
  • Um es zu verbergen: $("#myId").addClass('hidden');
  • Um es umzuschalten: $("#myId").toggleClass('hidden');

Verwenden Sie nicht die CSS-Klasse .show, sie hat einen sehr kleinen Anwendungsfall. Die Definitionen von show, hiddenund invisiblesind in dem docs .

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

4
Vielen Dank. Ich habe mich lange über Stackoverflow für so etwas gewundert, um eine einfache Antwort zu erhalten. Vielen Dank
Suchergebnisse Web-Ergebnisse Pi

Hat jemand eine Idee, welche Methoden es gibt: show () und hide () für dann?
Checkliste

9
Dann können Sie es nicht animieren (z. B. fadeIn()). Verwenden Sie daher die Klasse collapseanstelle von hidden. Und dann natürlich gibt es keine Notwendigkeit für die Verwendung removeClass, addClassetc.
TheStoryCoder

2
Für Bootstrap 4 müssen Sie verwenden .hidden-xs-up. v4-alpha.getbootstrap.com/layout/responsive-utilities/… Es gibt auch ein hiddenHTML5-Attribut. v4-alpha.getbootstrap.com/content/reboot/…
Chloe

1
@ Kangur jQuery .hide()ist keine Bootstrap- .hideKlasse. Die jQuery-Methode funktioniert einwandfrei, ist jedoch nicht der Bootstrap-Weg. Bootstrap-Bibliotheken hängen von der Einbeziehung der Klasse .hidden in das Element ab, um festzustellen, ob es nicht vorhanden ist. jQuery fügt das nicht hinzu - es sei denn, Sie hacken es wie hier: stackoverflow.com/a/27439371/124486 . In diesem Fall könnten Sie andere jQuery-spezifische Dinge beschädigen .
Evan Carroll

65

Einfach:

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

Oder wenn Sie irgendwie wollen, dass die Klasse noch da ist:

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

1
Hier ist ein jQuery-Plugin, mit dem Sie .show () und .hide () auch mit den Bootstrap-Klassen 'hidden' und 'hide' verwenden können. gist.github.com/zimkies/8360181
zimkies

9
Laut Bootstrap-Dokumentation ist .hide verfügbar, wirkt sich jedoch nicht immer auf Bildschirmleseprogramme aus und ist ab Version 3.0.1 veraltet. Verwenden Sie stattdessen .hidden oder .sr-only.
Bjtilley

18

Verwenden Sie Bootstrap .collapse anstelle von .hidden

Später in JQuery können Sie .show () oder .hide () verwenden, um es zu bearbeiten


16

Diese Lösung ist veraltet. Verwenden Sie die am besten gewählte Lösung.

Die hideKlasse ist nützlich, um den Inhalt beim Laden der Seite verborgen zu halten.

Meine Lösung hierfür ist, während der Initialisierung zu jquery's hide zu wechseln:

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

Dann show()und hide()sollte wie gewohnt funktionieren.


1
.hide ist ab v3.0.1
Evan Carroll

2
Ok, benutze .hidden ab v3.0.1
Dustin Graham

In diesem Fall kann es zu Flimmern von Inhalten kommen, die für Mikrosekunden angezeigt werden, bevor sie mit JS ausgeblendet werden.
Sergey Romanov

Wenn Sie zuerst .hide () aufrufen, wird Folgendes angezeigt: none; zum Style-Tag. Dies geschieht vor dem Entfernen der Hide-Klasse. Wenn Sie es in dieser Reihenfolge haben, sollte es nicht flackern.
Dustin Graham

14

Eine andere Möglichkeit, diesem Ärger zu begegnen, besteht darin, eine eigene CSS-Klasse zu erstellen, die das! Wichtige am Ende der Regel nicht wie folgt festlegt:

.hideMe {
    display: none;
}

und wie folgt verwendet:

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

und jetzt funktioniert das Verstecken von jQuery

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

Es umgeht das Problem, das durch die Verwendung der Bootstrap-Klassen entsteht. Warum diese kurze und einfache Lösung ablehnen?
Dbrin

Weil diese kurze und einfache Lösung nicht die Frage beantwortet, die speziell die Verwendung der Bootstrap3-Klassen erfordert. Ganz zu schweigen davon, dass .hidden in Bootstrap als .hidden { display: none !important; visibility: hidden !important; }
Evan Carroll

2
und genau das ist das Problem, JQuery-Methoden zum Verstecken und Anzeigen funktionieren mit diesem CSS nicht gut.
Dbrin

5

Die beschriebene Methode @ Dustin-Graham ist, wie ich es auch mache. Denken Sie auch daran, dass Bootstrap 3 jetzt "versteckt" anstelle von "verstecken" verwendet, wie in der Dokumentation bei getbootstrap beschrieben . Also würde ich so etwas machen:

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

Wenn Sie dann jQuery show()und hide()Methoden verwenden, tritt kein Konflikt auf.


So elegant und einfach - Sie haben gerade einen häufigen Bootstrap-Mangel überwunden. Ich würde hiddenclass verwenden und dann versuchen, dies show()in jQuery zu tun , und nichts würde passieren. Ihre Lösung behebt dies so einfach, und ich habe nicht daran gedacht.
Volomike

5

Initiieren Sie das Element als solches:

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

Verwenden Sie dann das Ereignis, das Sie anzeigen möchten, als solches:

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

Der einfachste Weg, glaube ich.


3

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

2

Ich benutze gerne die toggleClass:

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

Das wäre toll, aber das switchwird überhaupt nicht benötigt.
Evan Carroll

2
$(function(){

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

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

})

// Sie müssen nicht einmal das #my-div .hideNor einstellen, sondern !importantnur den Umschalter in der Ereignisfunktion einfügen / wiederholen.


2

Dies ist kürzlich beim Upgrade von 2.3 auf 3.1 aufgetreten. unsere jQuery Animationen ( slidedown ) brach , weil wir setzen wurden ausblenden auf die Elemente in der Seitenvorlage. Wir sind den Weg gegangen, namengebundene Versionen von Bootstrap-Klassen zu erstellen, die jetzt die hässliche ! Wichtige Regel enthalten.

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

3.1 unterstützt .hide nicht, es hat .hidden.
Evan Carroll

2

Razz 'Antwort ist gut, wenn Sie bereit sind, das, was Sie getan haben, neu zu schreiben.

War in den gleichen Schwierigkeiten und arbeitete es mit folgendem aus:

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

Werfen Sie es weg, wenn Bootstrap eine Lösung für dieses Problem enthält.


1
Ist es notwendig oder optimal zu prüfen, ob die Klasse existiert, bevor Sie anrufen .removeClass()oder .addClass()?
Evan Carroll

Auch funktioniert nicht .removeClass()schon über das Set? Könnten Sie nicht einfach anrufen$(this).removeClass('show')
Evan Carroll


2

Update : Von nun an benutze ich .collapseund $('.collapse').show().


Für Bootstrap 4 Alpha 6

Für Bootstrap 4 müssen Sie verwenden .hidden-xs-up.

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

Die .hidden - * - up-Klassen verbergen das Element, wenn sich das Ansichtsfenster am angegebenen Haltepunkt oder weiter befindet. Beispielsweise verbirgt .hidden-md-up ein Element in mittleren, großen und extragroßen Ansichtsfenstern.

Es gibt auch ein hiddenHTML5-Attribut.

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

HTML5 fügt ein neues globales Attribut mit dem Namen [hidden] hinzu, das als Anzeige gestaltet ist: standardmäßig keines. Indem wir eine Idee von PureCSS ausleihen, verbessern wir diese Standardeinstellung, indem wir [hidden] {display: none! Important machen; }, um zu verhindern, dass die Anzeige versehentlich überschrieben wird. Während [versteckt] von IE10 nicht nativ unterstützt wird, umgeht die explizite Deklaration in unserem CSS dieses Problem.

<input type="text" hidden>

Es gibt auch .invisibleAuswirkungen auf das Layout.

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

Mit der Klasse .invisible kann nur die Sichtbarkeit eines Elements umgeschaltet werden. Dies bedeutet, dass die Anzeige nicht geändert wird und das Element weiterhin den Fluss des Dokuments beeinflussen kann.


1

Ausblenden und Ausblenden sind veraltet und werden später entfernt. In neuen Versionen sind sie nicht mehr vorhanden. Sie können je nach Bedarf die Klassen d-none / d-sm-none / unsichtbar usw. verwenden. Der wahrscheinliche Grund, warum sie entfernt wurden, ist, dass das Verstecken im CSS-Kontext etwas verwirrend ist. In CSS wird das Ausblenden (Ausblenden) zur Sichtbarkeit und nicht zur Anzeige verwendet. Sichtbarkeit und Anzeige sind verschiedene Dinge.

Wenn Sie eine Klasse für die Sichtbarkeit benötigen: versteckt, benötigen Sie eine unsichtbare Klasse von Sichtbarkeitsdienstprogrammen.

Überprüfen Sie unten die Dienstprogramme für Sichtbarkeit und Anzeige:

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

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


1

Verwenden Sie das folgende Snippet für Bootstrap 4, das jQuery erweitert:

(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. Fügen Sie den obigen Code in eine Datei ein. Nehmen wir an, "myJqExt.js"
  2. Fügen Sie die Datei ein, nachdem jQuery aufgenommen wurde.

  3. Verwenden Sie es mit der Syntax

    $ (). hideShow ('hide');

    $ (). hideShow ('show');

Ich hoffe, ihr findet es hilfreich. :-)


0

Bootstrap, JQuery, Namespaces ... Was ist falsch an einem einfachen:

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

Sie können eine kleine Hilfsfunktion erstellen, die KISS-konform ist:

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

0

Basierend auf den obigen Antworten habe ich gerade meine eigenen Funktionen hinzugefügt und dies steht nicht im Widerspruch zu den verfügbaren jquery-Funktionen wie .hide (), .show (), .toggle (). Ich hoffe es hilft.

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

0

Ich habe mein Problem durch Bearbeiten der Bootstrap-CSS-Datei gelöst. Siehe Dokument:

.ausblenden:

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

.hide {
  display: none !important;
}

.hidden ist das, was wir jetzt verwenden sollen, aber es ist tatsächlich:

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

Die jQuery "fadeIn" funktioniert aufgrund der "Sichtbarkeit" nicht.

Für den neuesten Bootstrap wird .hide also nicht mehr verwendet, befindet sich jedoch weiterhin in der Datei min.css. Also habe ich .hidden AS IS verlassen und einfach das "! wichtig" aus der ".hide" -Klasse entfernt (die sowieso veraltet sein soll). Sie können es aber auch einfach in Ihrem eigenen CSS überschreiben. Ich wollte nur, dass alle meine Anwendungen gleich funktionieren, also habe ich die Bootstrap-CSS-Datei geändert.

Und jetzt funktioniert die jQuery "fadeIn ()".

Der Grund, warum ich dies im Vergleich zu den obigen Vorschlägen getan habe, ist, dass beim "removeClass ('. Hide')" das Objekt sofort angezeigt wird und Sie die Animation überspringen :)

Ich hoffe es hat anderen geholfen.


0

☀️ Die richtige Antwort

In Bootstrap 4 verstecken Sie das Element:

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

🛑 Dann könnten Sie es buchstäblich zeigen mit:

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

💓 Wenn Sie dies jedoch auf semantische Weise tun, indem Sie die Verantwortung von Bootstrap auf jQuery übertragen, können Sie andere jQuery-Feinheiten wie das Fading verwenden:

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

-1

Twitter Bootstrap bietet Klassen zum Umschalten von Inhalten, siehe https://github.com/twbs/bootstrap/blob/3ee5542c990817324f0a07b97d01d1fe206fd8d6/less/utilities.less .

Ich bin völlig neu in jQuery und nachdem ich ihre Dokumente gelesen hatte, kam ich zu einer anderen Lösung, um Twitter Bootstrap + jQuery zu kombinieren.

Erstens besteht die Lösung zum "Ausblenden" und "Anzeigen" eines Elements (Klasse wsis-Collapse) beim Klicken auf ein anderes Element (Klasse wsis-toggle) in der Verwendung von .toggle .

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

Sie haben das Element bereits .wsis-collapsemithilfe der Twitter Bootstrap (V3) -Klasse ausgeblendet .hidden:

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

Wenn Sie auf klicken .wsis-toggle, fügt die jQuery einen Inline-Stil hinzu:

display: block

Aufgrund des !importantTwitter-Bootstraps hat dieser Inline-Stil keine Auswirkung, daher müssen wir die .hiddenKlasse entfernen , aber ich werde dies nicht empfehlen .removeClass! Denn wenn jQuery etwas wieder ausblendet, wird auch ein Inline-Stil hinzugefügt:

display: none

Dies ist nicht dasselbe wie die .hidden-Klasse von Twitter Bootstrap, die auch für AT (Screenreader) optimiert ist. Wenn wir also das versteckte Div zeigen wollen, müssen wir die .hiddenKlasse von Twitter Bootstrap loswerden, damit wir die wichtigen Anweisungen loswerden, aber wenn wir es wieder verstecken, wollen wir die .hiddenKlasse wieder haben! Wir können dafür [.toggleClass] [3] verwenden.

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

Auf diese Weise verwenden Sie die versteckte Klasse jedes Mal, wenn der Inhalt ausgeblendet wird.

Die .showKlasse in TB entspricht tatsächlich dem Inline-Stil der jQuery 'display: block'. Aber wenn die .showKlasse irgendwann anders sein wird, fügen Sie einfach auch diese Klasse hinzu:

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

@EvanCarroll, warum ist es komplex? Ich habe auch Ihre Antwort gelesen und sehe, dass Sie vorschlagen, toggleClass zu verwenden, was ich auch tue, sodass ich Ihren Kommentar nicht verstehe.
user2312234
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.