Bootstrap JS Collapse
JS Collapse (collapse.js)
Získejte základní styly a flexibilní podporu pro skládací komponenty, jako jsou akordeony a navigace.
Závislost na pluginu: Collapse vyžaduje, aby byl ve vaší verzi Bootstrapu zahrnut přechodový plugin.
Chcete-li získat výukový program o Collapsibles, přečtěte si náš výukový program Bootstrap Collapse .
Třídy zásuvných modulů Collapse
| Class | Description | Example |
|---|---|---|
| .collapse | Hides the content | |
| .collapse in | Shows the content | |
| .collapsing | Added when the transition starts, and removed when it finishes |
Přes data-* Atributy
Stačí přidat data-toggle="collapse" a data-target k prvku a automaticky přiřadit ovládání sbalitelného prvku. Atribut data-target přijímá selektor CSS, na který se má použít sbalení. Nezapomeňte přidat sbalení třídy do skládacího prvku. Pokud chcete, aby se ve výchozím nastavení otevřela, přidejte další třídu.
Příklad
<button class="btn" data-toggle="collapse" data-target="#demo">Collapsible</button>
<div id="demo" class="collapse">
Some text..
</div>
Tip: Chcete-li ke sbalitelnému ovládacímu prvku přidat správu skupiny podobnou akordeonu, přidejte datový atribut data-parent="#selector".
Prostřednictvím JavaScriptu
Povolit ručně pomocí:
$('.collapse').collapse()
Možnosti sbalení
Možnosti lze předávat prostřednictvím atributů dat nebo JavaScriptu. U datových atributů připojte název volby k data-, jako v 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 |
Metody sbalení
V následující tabulce jsou uvedeny všechny dostupné metody sbalení.
| 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 |
Sbalit události
V následující tabulce jsou uvedeny všechny dostupné události sbalení.
| 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) |
Další příklady
Jednoduché skládací
Následující příklad umožňuje pomocí tlačítka přepínat rozbalovací a sbalovací obsah jiného prvku:
Příklad
<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>
Skládací panel
Následující příklad ukazuje skládací panel:
Příklad
<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>
Skupina skládacích seznamů
Následuje sbalitelný panel se skupinou seznamů uvnitř:
Příklad
<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>
Akordeon
Následující příklad ukazuje jednoduchý akordeon rozšířením komponenty panelu:
Poznámka: Atribut data-parentzajišťuje, že všechny skládací prvky pod zadaným rodičem budou zavřeny, když se zobrazí jedna ze sbalitelných položek.
Příklad
<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>
Rozbalit a sbalit Přepínání ikon a textu
Následující příklad změní text a ikonu otevřít/zavřít při otevírání a zavírání sbalitelného obsahu:
Příklad
$(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');
});
});
Nebo můžete použít CSS:
Příklad
/* 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";
}