jQuery show () für Twitter Bootstrap CSS-Klasse versteckt

89

Ich verwende Twitter Bootstrap und stelle fest, dass jQuery show()oder ein fadeIn()mit Klasse gekennzeichnetes DOM-Element nicht angezeigt wird hidden, da die jQuery-Funktionen nur die display: noneSpezifikation entfernen . Das visibilityist jedoch immer noch eingestellt hidden.

Ich frage mich, wie ich das am besten umgehen kann.

  1. Entfernen Sie die hiddenKlasse für das Element
  2. Ändern Sie die Sichtbarkeitseigenschaft
  3. Überschreibe die versteckte Klasse in meinem eigenen CSS

Insbesondere möchte ich wissen, ob und warum es besser ist, dies mit jQuery oder CSS zu beheben.

jquery twitter-bootstrap Lim H.
quelle
Im Allgemeinen verwende ich {sichtbarkeit: versteckt} nicht, da das Element im DOM Platz beansprucht. Gibt es einen Grund, warum Sie dies tun müssen?
Isherwood
1
@isherwood Das reagiert visibility: hiddenvom Bootstrap.
Lim H.

Antworten:

124

Die CSS-Klasse, die Sie suchen, ist .collapse. Dies setzt das Element aufdisplay: none;

Die Verwendung $('#myelement').show()funktioniert also einwandfrei.

UPDATE: Bootstrap v3.3.6 hat .collapse zurück aktualisiert auf:

.collapse {
  display: none;
}
Eoinii
quelle
2
Dies sollte die akzeptierte Antwort sein. Es funktioniert auch mit .slideDown(), .fadeIn()etc. .hiddenin Bootstrap ist für Dinge , die Sie nie angezeigt werden sollen.
Snumpy
Ist es neu in Bootstrap 3?
Lim H.
Nein - ich habe gesehen, dass es in der Dokumentation verwendet wird. <div class = "nav-kollabieren kollabieren"> Diese Zeile wurde aus Beispielen der Version 2.3.2 entnommen.
Eoinii
33
Leider funktioniert diese Antwort nicht mehr mit Boostrap 3. .collapseJetzt setzt auchvisibility: hidden;
Tom17
9
Funktioniert in meinem Bootstrap 3?
James McCormack
21

Dadurch wird Ihr unsichtbares Element eingeblendet und die Klasse entfernt

$('#element.hidden').css('visibility','visible').hide().fadeIn().removeClass('hidden');

http://jsfiddle.net/7qxVL/

Wenn Sie nicht wirklich möchten, dass das Element unsichtbar ist (dh den Speicherplatz einnimmt), möchten Sie möglicherweise .hidden neu definieren (ändern Sie in Ihrem lokalen CSS nicht die Bootstrap-Quelle oder noch besser in Ihrer lokalen WENIGER-Datei).

David Fregoli
quelle
Danke hat für mich funktioniert! Ich habe es vereinfacht, einfach :: fadeIn (). RemoveClass ('hidden') zu machen - keine Notwendigkeit, CSS direkt zu manipulieren oder zu verstecken.
Dbrin
1
Siehe die Antwort von @IrishJoker. Sie sollten nicht .hiddenfür Elemente verwenden, die Sie mit Javascript anzeigen möchten. Verwenden Sie .collapsestattdessen.
Snumpy
13

Warnung:

bootstrap 3.3.0 hat gerade .collapse geändert in:

.collapse {
  display: none;
  visibility: hidden;
}

Was für jQuery.show () eine bahnbrechende Änderung ist, musste ich wieder auf Inlining zurückgreifen:

<div class="alert alert-danger" style="display:none;" >
</div>

um jQuery wie folgt weiter zu verwenden:

$('.alert').html("Change a few things up and try submitting again.").show()

Die einzige Klasse, die ich in Bootstrap 3.3.0 finden konnte, um nur 'display: none' anzuwenden, ist

.navbar {
  display: none;
}
Ted Killilea
quelle
1
Ich sehe keinen guten Grund für Bootstrap, dies zu tun. Ich persönlich habe immer eine andere CSS-Datei, die zum Überschreiben von CSS-Einstellungen verwendet wird. Ich würde den Kollaps ersetzen, um nur die Anzeigeeinstellung zu erhalten. Auf diese Weise können Sie fortfahren, ohne sich Sorgen machen zu müssen, dass alles kaputt geht. Schmerz in der Nachricht :(
Eoinii
Die Lösung in Bootstrap 3.3.x zu verwenden .collapse('hide')und .collapse('show')statt jQuery-Methoden. Sie können die anfängliche Sichtbarkeit direkt im HTML über die Klasse collapse(ausblenden) oder collapse in( anzeigen) festlegen . Siehe getbootstrap.com/javascript/#collapse .
Alexw
Die neueste Version 3.3.6 hat diese Änderung
rückgängig gemacht
5

Ich hatte das gleiche Problem. Ich habe diesen Patch verwendet:

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

Dann hatte ich ein anderes Problem, da meine Anwendung neue Elemente generiert und diese anhängt / voranstellt. Was ich schließlich getan habe, ist nach dem Generieren des neuen Elements, das ich tue:

var newEl = ...;
$(newEl).find('.hidden').hide().removeClass('hidden');
Guyaloni
quelle
4

Für mich war es, weil Bootstrap das verwendet !important Hack sowohl für das Verstecken als auch für das Verstecken von Klassen verwendet.

Sie können also nicht die show()mit jquery bereitgestellten etc-Methoden verwenden. Stattdessen müssen Sie noch schrecklicheren Code überschreiben, der den Hacky-Code überschreibt.

$('#myelement').attr('style', 'display: block !important');

! wichtig ist ein letzter Ausweg und sollte wirklich nicht in einer Kernbibliothek wie Bootstrap verwendet werden.

John Magnolia
quelle
4

Das funktioniert, aber ich werde die erste Antwort versuchen und die Klassen in ändern .collapse.

.toggleClass('hidden')
Chloe
quelle