Bootstrap JS zusammenbrechen
JS-Zusammenbruch (collapse.js)
Holen Sie sich Basisstile und flexible Unterstützung für zusammenklappbare Komponenten wie Akkordeons und Navigation.
Plug-in-Abhängigkeit: Collapse erfordert, dass das Übergangs-Plug-in in Ihrer Version von Bootstrap enthalten ist.
Ein Tutorial zu Collapsibles finden Sie in unserem Bootstrap Collapse Tutorial .
Die Collapse-Plug-in-Klassen
| Class | Description | Example |
|---|---|---|
| .collapse | Hides the content | |
| .collapse in | Shows the content | |
| .collapsing | Added when the transition starts, and removed when it finishes |
Über data-* Attribute
Fügen Sie einfach data-toggle="collapse" und ein Datenziel zu element hinzu, um automatisch die Kontrolle über ein reduzierbares Element zuzuweisen. Das data-target-Attribut akzeptiert einen CSS-Selektor, auf den die Minimierung angewendet wird. Stellen Sie sicher, dass Sie dem reduzierbaren Element die Klassenreduzierung hinzufügen. Wenn Sie möchten, dass es standardmäßig geöffnet ist, fügen Sie die zusätzliche Klasse hinzu.
Beispiel
<button class="btn" data-toggle="collapse" data-target="#demo">Collapsible</button>
<div id="demo" class="collapse">
Some text..
</div>
Tipp: Um einem reduzierbaren Steuerelement eine akkordeonartige Gruppenverwaltung hinzuzufügen, fügen Sie das Datenattribut data-parent="#selector" hinzu.
Über JavaScript
Manuell aktivieren mit:
$('.collapse').collapse()
Minimierungsoptionen
Optionen können über Datenattribute oder JavaScript übergeben werden. Hängen Sie für Datenattribute den Optionsnamen an data- an, wie in data-parent="".
| Name | Type | Default | Description |
|---|---|---|---|
| parent | selector | false | All collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior - this is dependent on the panel class) - See example below |
| toggle | boolean | true | Toggles the collapsible element on invocation |
Collapse-Methoden
In der folgenden Tabelle sind alle verfügbaren Minimierungsmethoden aufgeführt.
| Method | Description | Try it |
|---|---|---|
| .collapse(options) | Activates the collapsible element with an option. See options above for valid values | |
| .collapse("toggle") | Toggles the collapsible element | |
| .collapse("show") | Shows the collapsible element | |
| .collapse("hide") | Hides the collapsible element |
Ereignisse minimieren
In der folgenden Tabelle sind alle verfügbaren Minimierungsereignisse aufgeführt.
| Event | Description | Try it |
|---|---|---|
| show.bs.collapse | Occurs when the collapsible element is about to be shown | |
| shown.bs.collapse | Occurs when the collapsible element is fully shown (after CSS transitions have completed) | |
| hide.bs.collapse | Occurs when the collapsible element is about to be hidden | |
| hidden.bs.collapse | Occurs when the collapsible element is fully hidden (after CSS transitions have completed) |
Mehr Beispiele
Einfach zusammenklappbar
Das folgende Beispiel bewirkt, dass eine Schaltfläche den ein- und ausklappenden Inhalt eines anderen Elements umschaltet:
Beispiel
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">
Simple collapsible
</button>
<div id="demo" class="collapse in">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
</div>
Faltbare Platte
Das folgende Beispiel zeigt ein reduzierbares Bedienfeld:
Beispiel
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1">Collapsible panel</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">Panel Body</div>
<div class="panel-footer">Panel Footer</div>
</div>
</div>
</div>
Reduzierbare Listengruppe
Das Folgende zeigt ein reduzierbares Bedienfeld mit einer Listengruppe darin:
Beispiel
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1">Collapsible list group</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<ul class="list-group">
<li class="list-group-item">One</li>
<li class="list-group-item">Two</li>
<li class="list-group-item">Three</li>
</ul>
<div class="panel-footer">Footer</div>
</div>
</div>
</div>
Akkordeon
Das folgende Beispiel zeigt ein einfaches Akkordeon durch Erweiterung der Panel-Komponente:
Hinweis: Das data-parentAttribut stellt sicher, dass alle reduzierbaren Elemente unter dem angegebenen übergeordneten Element geschlossen werden, wenn eines der reduzierbaren Elemente angezeigt wird.
Beispiel
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
Collapsible Group 1</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
Collapsible Group 2</a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse3">
Collapsible Group 3</a>
</h4>
</div>
<div id="collapse3" class="panel-collapse collapse">
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</div>
</div>
</div>
</div>
Erweitern und Reduzieren Symbol & Text umschalten
Das folgende Beispiel ändert den Text und das Symbol zum Öffnen/Schließen beim Öffnen und Schließen des reduzierbaren Inhalts:
Beispiel
$(document).ready(function(){
$("#demo").on("hide.bs.collapse", function(){
$(".btn").html('<span class="glyphicon glyphicon-collapse-down"></span> Open');
});
$("#demo").on("show.bs.collapse", function(){
$(".btn").html('<span class="glyphicon glyphicon-collapse-up"></span> Close');
});
});
Oder Sie können CSS verwenden:
Beispiel
/* Icon when the collapsible content is shown */
.btn:after {
font-family: "Glyphicons Halflings";
content: "\e114";
}
/* Icon when the collapsible content is hidden */
.btn.collapsed:after {
content: "\e080";
}