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.
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.
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.
@ 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.
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
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
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
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:
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
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.
14462100cookie-checkWie kann ich ein Element mit Twitter Bootstrap ausblenden und mit jQuery anzeigen?yes
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