Wie kann ich ein Element mit Twitter Bootstrap ausblenden und mit jQuery anzeigen?

Lesezeit: 5 Minuten

Benutzeravatar von psylosss
Psylosss

Nehmen wir an, ich erstelle ein HTML-Element wie dieses,

<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 vor jQuery/JavaScript ein- und ausblenden?

Javascript:

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

Ergebnis: (mit einem von diesen).

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

Was ist der einfachste Weg, um ein Element 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 ein Unterschied im Klassennamen ist.

    – Evan Caroll

    29. Oktober 2018 um 1:30 Uhr

Benutzeravatar von Evan Carroll
Evan Caroll

Die richtige Antwort

Bootstrap 4.x

Bootstrap 4.x verwendet das neue .d-none Klasse. Anstatt zu verwenden entweder .hiddenoder .hide wenn Sie Bootstrap 4.x verwenden .d-none.

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

(dank des Kommentars von Fangming)

Bootstrap 3.x

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

.hide ist verfügbar, wirkt sich jedoch nicht immer auf Screenreader aus und ist seit v3.0.1 veraltet

Zweitens verwenden Sie jQuery .toggleClass(), .addClass() Und .removeClass()

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

Verwenden Sie nicht die CSS-Klasse .show, hat es einen sehr kleinen Anwendungsfall. Die Definitionen von show, hidden Und invisible sind in der Dokumente.

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

  • Vielen Dank, ich habe mich lange über Stackoverflow für so etwas gewundert, um eine einfache Antwort zu erhalten. Danke

    – Dil.

    27. Juli 2015 um 10:53 Uhr

  • Hat jemand eine Idee, was die Methoden sind: show() und hide() für dann?

    – Checkliste

    26. April 2016 um 5:11 Uhr

  • Dann können Sie es nicht animieren (zB. fadeIn()). Verwenden Sie daher die Klasse collapse anstatt hidden. Und dann gibt es natürlich keine Notwendigkeit für die Verwendung removeClass, addClassusw.

    – TheStoryCoder

    22. August 2016 um 15:28 Uhr


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

    – Chloe

    12. Juni 2017 um 1:05 Uhr

  • @ Kangur jQuery .hide() ist nicht Bootstrap .hide Klasse. Die jQuery-Methode funktioniert gut, aber es ist nicht der Bootstrap-Weg. Bootstrap-Bibliotheken hängen von der Einbeziehung der .hidden-Klasse in das Element ab, um festzustellen, dass 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 Caroll

    29. Dezember 2017 um 18:16 Uhr

Einfach:

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

Oder wenn Sie irgendwie möchten, dass die Klasse noch da ist:

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

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

    – Zimkies

    10. Januar 2014 um 18:49 Uhr

  • Laut Bootstrap-Dokumentation ist .hide verfügbar, wirkt sich jedoch nicht immer auf Screenreader aus und ist seit v3.0.1 veraltet. Verwenden Sie stattdessen .hidden oder .sr-only.

    – bjtilley

    20. Januar 2014 um 15:17 Uhr

Ivans Benutzeravatar
Ivan

Verwenden Sie Bootstrap .collapse anstatt .hidden.

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

  • Dies ist die richtige Antwort, die akzeptierte hat !important und obwohl es möglich ist, sie mit toggleClass anzuzeigen, funktionieren jquery .show und .slide nicht mit dieser, aber mit dieser. Danke

    – Henlo

    31. August 2022 um 19:47 Uhr

Benutzeravatar von Dustin Graham
Dustin Graham

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

Der hide Klasse ist nützlich, um den Inhalt beim Laden der Seite verborgen zu halten.

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

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

Dann show() Und hide() sollte normal funktionieren.

Eine andere Möglichkeit, diesem Ärgernis zu begegnen, besteht darin, eine eigene CSS-Klasse zu erstellen, die das !important am Ende der Regel nicht setzt, wie hier:

.hideMe {
    display: none;
}

und so verwendet:

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

und jetzt funktioniert das Ausblenden von jQuery

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

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

    – dbrin

    3. Februar 2015 um 0:36 Uhr

  • Denn diese kurze und einfache Lösung beantwortet nicht die Frage, die speziell die Verwendung der Klassen von Bootstrap3 erfordert. Ganz zu schweigen davon, dass es zwar einfach ist, aber in Bootstrap versteckt ist ist definiert als .hidden { display: none !important; visibility: hidden !important; }

    – Evan Caroll

    3. Februar 2015 um 8:07 Uhr

  • und genau das ist das Problem, JQuery-Methoden zum Verbergen und Anzeigen funktionieren mit diesem CSS nicht gut.

    – dbrin

    3. Februar 2015 um 17:25 Uhr

Benutzeravatar von MichaelJTaylor
MichaelJTaylor

Die von @dustin-graham skizzierte Methode mache ich auch. Denken Sie auch daran, dass Bootstrap 3 jetzt “hidden” anstelle von “hide” gemäß ihrer Dokumentation unter verwendet Bootstrap bekommen. Also ich würde sowas machen:

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

Dann, wann immer Sie die jQuery verwenden show() Und hide() Methoden, es wird keinen Konflikt geben.

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

    – dbrin

    3. Februar 2015 um 0:36 Uhr

  • Denn diese kurze und einfache Lösung beantwortet nicht die Frage, die speziell die Verwendung der Klassen von Bootstrap3 erfordert. Ganz zu schweigen davon, dass es zwar einfach ist, aber in Bootstrap versteckt ist ist definiert als .hidden { display: none !important; visibility: hidden !important; }

    – Evan Caroll

    3. Februar 2015 um 8:07 Uhr

  • und genau das ist das Problem, JQuery-Methoden zum Verbergen und Anzeigen funktionieren mit diesem CSS nicht gut.

    – dbrin

    3. Februar 2015 um 17:25 Uhr

Benutzeravatar von Peter Mortensen
Peter Mortensen

Leiten Sie das Element mit als solches ein:

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

Verwenden Sie dann das Ereignis, das Sie anzeigen möchten, wie folgt:

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

Der einfachste Weg, glaube ich.

1446210cookie-checkWie kann ich ein Element mit Twitter Bootstrap ausblenden und mit jQuery anzeigen?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy