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?
javascript
jquery
html
css
twitter-bootstrap
Psylosss
quelle
quelle
Antworten:
Die richtige Antwort
Bootstrap 4.x.
Bootstrap 4.x verwendet die neue
.d-none
Klasse . Anstatt entweder.hidden
oder.hide
wenn Sie Bootstrap 4.x verwenden, verwenden Sie.d-none
.$("#myId").removeClass('d-none');
$("#myId").addClass('d-none');
$("#myId").toggleClass('d-none');
(danke an den Kommentar von Fangming)
Bootstrap 3.x.
Erstens nicht verwenden
.hide
! Verwenden Sie.hidden
. Wie andere gesagt haben,.hide
ist veraltet,Verwenden Sie zweitens .toggleClass () , .addClass () und .removeClass () von jQuery.
$("#myId").removeClass('hidden');
$("#myId").addClass('hidden');
$("#myId").toggleClass('hidden');
Verwenden Sie nicht die CSS-Klasse
.show
, sie hat einen sehr kleinen Anwendungsfall. Die Definitionen vonshow
,hidden
undinvisible
sind in dem docs .quelle
fadeIn()
). Verwenden Sie daher die Klassecollapse
anstelle vonhidden
. Und dann natürlich gibt es keine Notwendigkeit für die VerwendungremoveClass
,addClass
etc..hidden-xs-up
. v4-alpha.getbootstrap.com/layout/responsive-utilities/… Es gibt auch einhidden
HTML5-Attribut. v4-alpha.getbootstrap.com/content/reboot/….hide()
ist keine Bootstrap-.hide
Klasse. 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 .Einfach:
Oder wenn Sie irgendwie wollen, dass die Klasse noch da ist:
quelle
Verwenden Sie Bootstrap .collapse anstelle von .hidden
Später in JQuery können Sie .show () oder .hide () verwenden, um es zu bearbeiten
quelle
Diese Lösung ist veraltet. Verwenden Sie die am besten gewählte Lösung.
Die
hide
Klasse 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:
Dann
show()
undhide()
sollte wie gewohnt funktionieren.quelle
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:
und wie folgt verwendet:
und jetzt funktioniert das Verstecken von jQuery
quelle
.hidden { display: none !important; visibility: hidden !important; }
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:
Wenn Sie dann jQuery
show()
undhide()
Methoden verwenden, tritt kein Konflikt auf.quelle
hidden
class verwenden und dann versuchen, diesshow()
in jQuery zu tun , und nichts würde passieren. Ihre Lösung behebt dies so einfach, und ich habe nicht daran gedacht.Initiieren Sie das Element als solches:
Verwenden Sie dann das Ereignis, das Sie anzeigen möchten, als solches:
Der einfachste Weg, glaube ich.
quelle
HTML:
Javascript:
quelle
Ich benutze gerne die toggleClass:
quelle
switch
wird überhaupt nicht benötigt.// Sie müssen nicht einmal das
#my-div
.hide
Nor einstellen, sondern!important
nur den Umschalter in der Ereignisfunktion einfügen / wiederholen.quelle
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.
quelle
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:
Werfen Sie es weg, wenn Bootstrap eine Lösung für dieses Problem enthält.
quelle
.removeClass()
oder.addClass()
?.removeClass()
schon über das Set? Könnten Sie nicht einfach anrufen$(this).removeClass('show')
In Bootstrap 4 können Sie mit
d-none
class ein Element vollständig ausblenden. https://getbootstrap.com/docs/4.0/utilities/display/quelle
Update : Von nun an benutze ich
.collapse
und$('.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
Es gibt auch ein
hidden
HTML5-Attribut.https://v4-alpha.getbootstrap.com/content/reboot/#html5-hidden-attribute
Es gibt auch
.invisible
Auswirkungen auf das Layout.https://v4-alpha.getbootstrap.com/utilities/invisible-content/
quelle
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/
quelle
Verwenden Sie das folgende Snippet für Bootstrap 4, das jQuery erweitert:
Fügen Sie die Datei ein, nachdem jQuery aufgenommen wurde.
Verwenden Sie es mit der Syntax
$ (). hideShow ('hide');
$ (). hideShow ('show');
Ich hoffe, ihr findet es hilfreich. :-)
quelle
Bootstrap, JQuery, Namespaces ... Was ist falsch an einem einfachen:
Sie können eine kleine Hilfsfunktion erstellen, die KISS-konform ist:
quelle
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.
quelle
Ich habe mein Problem durch Bearbeiten der Bootstrap-CSS-Datei gelöst. Siehe Dokument:
.ausblenden:
.hidden ist das, was wir jetzt verwenden sollen, aber es ist tatsächlich:
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.
quelle
☀️ Die richtige Antwort
In Bootstrap 4 verstecken Sie das Element:
🛑 Dann könnten Sie es buchstäblich zeigen mit:
💓 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:
quelle
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 .
Sie haben das Element bereits
.wsis-collapse
mithilfe der Twitter Bootstrap (V3) -Klasse ausgeblendet.hidden
:Wenn Sie auf klicken
.wsis-toggle
, fügt die jQuery einen Inline-Stil hinzu:Aufgrund des
!important
Twitter-Bootstraps hat dieser Inline-Stil keine Auswirkung, daher müssen wir die.hidden
Klasse entfernen , aber ich werde dies nicht empfehlen.removeClass
! Denn wenn jQuery etwas wieder ausblendet, wird auch ein Inline-Stil hinzugefügt: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
.hidden
Klasse von Twitter Bootstrap loswerden, damit wir die wichtigen Anweisungen loswerden, aber wenn wir es wieder verstecken, wollen wir die.hidden
Klasse wieder haben! Wir können dafür [.toggleClass] [3] verwenden.Auf diese Weise verwenden Sie die versteckte Klasse jedes Mal, wenn der Inhalt ausgeblendet wird.
Die
.show
Klasse in TB entspricht tatsächlich dem Inline-Stil der jQuery'display: block'
. Aber wenn die.show
Klasse irgendwann anders sein wird, fügen Sie einfach auch diese Klasse hinzu:quelle