Anhand des Kernbeispiels aus der Javascript- Beispielseite von Bootstrap 3 für Collapse konnte ich den Status des Collaps mithilfe von Chevron-Symbolen anzeigen.
Ich habe diese Arbeit mit:
$('#accordion .accordion-toggle').click(function (e) {
var chevState = $(e.target).siblings("i.indicator").toggleClass('glyphicon-chevron-down glyphicon-chevron-up');
$("i.indicator").not(chevState).removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-up");
});
Dies funktioniert (nicht in allen Browsern vollständig getestet), aber ich frage mich, ob es dafür eine elegantere Lösung gibt.
Idealerweise möchte ich die Kernfunktion verwenden, bin mir aber nicht sicher, wie ich damit die gleichen Ergebnisse erzielen kann.
$('#accordion').on('hidden.bs.collapse', function () {
//do something...
})
Hier ist eine Arbeitsversion in jsfiddle .
jquery
css
twitter-bootstrap
twitter-bootstrap-3
Ryan Scott
quelle
quelle
Antworten:
Für den folgenden HTML- Code (aus Bootstrap 3-Beispielen ):
Visueller Effekt:
quelle
Sie könnten diese Art von Code verwenden:
=> JsFiddle arbeiten
quelle
$('#accordion').on('hidden.bs.collapse shown.bs.collapse', toggleChevron);
$('#accordion').on('hide.bs.collapse show.bs.collapse', toggleChevron);
stattdessen verwendenUm die Antwort mit den meisten Upticks zu verbessern, haben einige von Ihnen möglicherweise beim ersten Laden der Seite bemerkt, dass die Chevrons alle in die gleiche Richtung zeigen. Dies wird korrigiert, indem die Klasse "reduziert" zu Elementen hinzugefügt wird, die Sie reduziert laden möchten.
Hier ist eine funktionierende Geige: http://jsfiddle.net/3gYa3/585/
quelle
Verbesserung der Antwort von Bludream:
Sie können definitiv FontAwesome verwenden!
Stellen Sie sicher, dass Sie "reduziert" zusammen mit der Klasse "Panel-Überschrift" einschließen. Die "reduzierte" Klasse wird erst eingeschlossen, wenn Sie auf das Bedienfeld klicken, damit Sie die "reduzierte" Klasse einschließen können, um den richtigen Chevron anzuzeigen (dh Chevron-rechts wird beim Reduzieren und Chevron-down beim Öffnen angezeigt).
HTML
CSS
Es wird auch empfohlen, eine neue Klasse zu erstellen, anstatt eine vorhandene Klasse zu verwenden.
Siehe Codepen zum Beispiel: http://codepen.io/anon/pen/PPxOJX
quelle
Dank Biggates und Steakpi. Als Antwort auf die Frage Dreamonic habe ich ein paar Änderungen vorgenommen, um alle Header anklickbar zu machen (nicht nur Titelstring und Gluphs) und die Unterstreichung vom Link entfernt. Um zu erzwingen, dass Symbole in derselben Zeile angezeigt werden, habe ich am Ende der CSS-Anweisungen h4 hinzugefügt. Hier ist der geänderte Code:
Und das modifizierte CSS:
quelle
Hier sind ein paar reine CSS-Hilfsklassen, mit denen Sie jede Art von Umschaltinhalt direkt in Ihrem HTML-Code verarbeiten können.
Es funktioniert mit jedem Element, das Sie wechseln müssen. Was auch immer Ihr Layout ist, Sie fügen es einfach in ein paar Elemente mit den Klassen .if-Collapse und .if-Not-Collapse innerhalb des Toggle-Elements ein.
Der einzige Haken ist, dass Sie sicherstellen müssen, dass Sie den gewünschten Ausgangszustand des Umschalters eingestellt haben. Wenn es anfänglich geschlossen ist, setzen Sie eine reduzierte Klasse auf den Schalter.
Es erfordert auch den : not- Selektor, es funktioniert nicht auf IE8.
HTML-Beispiel:
Weniger Version:
CSS-Version:
quelle
Ich weiß, dass dies alt ist, aber da es jetzt 2018 ist, dachte ich, ich würde antworten, um es besser zu machen, indem ich den Code vereinfache und die Benutzererfahrung verbessere, indem ich den Chevron basierend auf dem Zusammenbruch drehen lasse oder nicht. Ich benutze jedoch FontAwesome. Hier ist das CSS:
Hier ist der HTML-Code für den Panel-Bereich:
Ich benutze Bootstraps, die nach rechts gezogen werden, um den Chevron ganz rechts von der Panel-Überschrift zu ziehen, die in voller Breite und ansprechend sein sollte. Das CSS erledigt die gesamte Animationsarbeit und dreht den Chevron basierend darauf, ob das Bedienfeld reduziert ist oder nicht. Einfach.
quelle
einfaches Beispiel arbeiten
einfach eingeben
HTML :
JavaScript
quelle
oder ... Sie können einfach einen solchen Stil verwenden.
http://codepen.io/anon/pen/GJjrQN
quelle
Ich benutze Schrift super ! und wollte, dass eine Platte zusammenklappbar ist
und die CSS
quelle
Angular scheint hier Probleme mit den JavaScript-basierten Ansätzen zu verursachen (zumindest die, die ich ausprobiert habe). Ich habe diese Lösung hier gefunden: http://www.codeproject.com/Articles/987311/Collapsible-Responsive-Master-Child-Grid-Using-Ang . Der Kern davon besteht darin,
data-ng-click
die Umschalttaste zu verwenden und die Methode zum Ändern der Schaltfläche in der Steuerung unter Verwendung des$scope
Kontexts festzulegen .Ich denke, ich könnte mehr Details liefern ... meine Schaltflächen sind auf das Glyphikon des Anfangszustands des Div eingestellt, in dem sie kollabieren (Glyphicon-Chevron-rechts == kollabiertes Div).
page.html:
controller.js:
quelle
Einzeiler.
In diesem Beispiel werden zusammenklappbare Tabellenzeilen gruppiert. Das einzige, was Sie tun müssen, ist, den Namen der Zielklasse (mein-Kollaps-Name) zu Ihrem Symbol hinzuzufügen:
Sie können dasselbe mit der nativen Caret-Klasse von Bootstrap erreichen, indem Sie
<span class='caret my-collapse-name'></span>
und verwendenspan.caret.collapse.in { transform: rotate(90deg); }
quelle
Wenn Sie versuchen, dies nur mit Panels zu verwenden (nicht mit Accordeon), versuchen Sie diesen Code:
quelle
Ich wollte einen reinen HTML-Ansatz, da ich HTML reduzieren und erweitern wollte, das im laufenden Betrieb über eine Vorlage hinzugefügt wurde! Ich habe mir das ausgedacht ...
https://jsfiddle.net/3mguht2y/1/
Welches könnte für jemanden von Nutzen sein :)
quelle