Bootstrap 4 JS-Zusammenbruch
Reduzieren Sie CSS-Klassen
Ein Tutorial zu Collapsibles finden Sie in unserem Bootstrap Collapse Tutorial .
| Class | Description | Example |
|---|---|---|
.collapse |
Hides the content | |
.collapse show |
Shows the collapsible content by default | |
.collapsing |
Added when the transition starts, and removed when it finishes |
Über data-* Attribute
Fügen Sie einfach data-toggle="collapse"ein und ein data-targetto-Element hinzu, um automatisch die Steuerung eines reduzierbaren Elements 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 "show" 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 | Try it |
|---|---|---|---|---|
| parent | selector | false | All collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior) | |
| 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 | |
| .collapse("dispose") | Destroys 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) |