JS Collapse (collapse.js)
Erhalten Basis Stile und flexible Unterstützung für zusammenklappbar Komponenten wie Akkordeons und Navigation.
Plugin-Abhängigkeit: Einsturz erfordert die Übergänge Plugin in Ihrer Version von Bootstrap aufgenommen werden.
Ein Tutorial über Collapsibles, unsere lesen Bootstrap Collapse Tutorial .
The Collapse Plugin Classes
| Klasse | Beschreibung | Beispiel |
|---|---|---|
| .collapse | Blendet den Inhalt | Versuch es |
| .collapse in | Zeigt den Inhalt | Versuch es |
| .collapsing | Hinzugefügt, wenn der Übergang beginnt, und entfernt, wenn es fertig ist | Versuch es |
Via data-* Attribute
Fügen Sie einfach data-toggle="collapse" und ein Datenziel Element automatisch die Steuerung eines zusammenlegbaren Element zuordnen. Die Daten-target Attribut akzeptiert einen CSS-Selektor den Zusammenbruch zu beantragen. Achten Sie darauf, die Klasse Zusammenbruch die klappbare Element hinzuzufügen. Wenn Sie es offen auf die Standard möchten, fügen Sie die zusätzliche Klasse in.
Beispiel
<button class="btn" data-toggle="collapse" data-target="#demo">Collapsible</button>
<div id="demo" class="collapse">
Some text..
</div>
Versuch es selber " Tipp: Um die ziehharmonikaartige Gruppenmanagement einen zusammenlegbaren Steuerung, fügen Sie das Datenattribut hinzufügen data-parent="#selector" .
Via JavaScript
Aktivieren Sie manuell mit:
$('.collapse').collapse()Schließen Optionen
Die Optionen können über Datenattribute oder JavaScript übergeben werden. Die Option Namen Daten-, wie in für Datenattribute, hängen Sie data-parent="" .
| Name | Art | Standard | Beschreibung |
|---|---|---|---|
| parent | selector | false | Alle zusammenklappbare Elemente unter dem angegebenen Elternteil wird geschlossen, wenn das zusammenklappbare Element dargestellt ist. (Ähnlich wie bei traditionellen Akkordeon Verhalten - dies ist abhängig von der Panel-Klasse) - Siehe unten Beispiel |
| toggle | boolean | true | Blendet das zusammendrückbare Element beim Aufruf |
Collapse Methoden
Die folgende Tabelle listet alle verfügbaren Minimierungsmethoden.
| Methode | Beschreibung | Versuch es |
|---|---|---|
| .collapse( options ) | Aktiviert das zusammenklappbare Element mit einer Option. Siehe oben stehenden Optionen für gültige Werte | |
| .collapse("toggle") | Blendet das zusammenklappbare Element | Versuch es |
| .collapse("show") | Zeigt die zusammenklappbare Element | Versuch es |
| .collapse("hide") | Blendet das zusammenklappbare Element | Versuch es |
Collapse Veranstaltungen
Die folgende Tabelle listet alle verfügbaren Zusammenbruch Veranstaltungen.
| Event | Beschreibung | Versuch es |
|---|---|---|
| show.bs.collapse | Tritt ein, wenn das zusammenklappbare Element über gezeigt werden soll | Versuch es |
| shown.bs.collapse | Tritt ein, wenn das zusammenklappbare Element vollständig angezeigt wird (nach dem CSS-Übergänge abgeschlossen haben) | Versuch es |
| hide.bs.collapse | Tritt ein, wenn das zusammenklappbare Element etwa ist versteckt werden | Versuch es |
| hidden.bs.collapse | Tritt ein, wenn das zusammenklappbare Element vollständig verborgen ist (nachdem CSS-Übergänge abgeschlossen haben) | Versuch es |
Beispiele
Einfach zusammenklappbare
Im folgenden Beispiel wird eine Taste drücken Sie die Auf- und Zuklappen Inhalt eines anderen Elements:
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> Versuch es selber " Reduzierbare Palette
Das folgende Beispiel zeigt einen zusammenklappbaren Platte:
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> Versuch es selber " Reduzierbare Liste Gruppe
Im Folgenden wird ein zusammenklappbares Panel mit einer Liste Gruppe innen:
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> Versuch es selber " Akkordeon
Das folgende Beispiel zeigt ein einfaches Akkordeon durch die Panel-Komponente erstreckt:
Hinweis: Die data-parent - Attribut stellt sicher , dass alle zusammenklappbare Elemente unter dem angegebenen Elternteil wird geschlossen, wenn eine der zusammenklappbare Element dargestellt ist.
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> Versuch es selber " Auf- und Zuklappen Toggle Symbol & Text
Im folgenden Beispiel wird das Öffnen / Schließen Text und Symbol beim Öffnen und Schließen des zusammenklappbaren Inhalt:
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');
});
}); Versuch es selber " 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";
} Versuch es selber "