Bootstrap JS Zwiń
Zwiń JS (collapse.js)
Uzyskaj podstawowe style i elastyczną obsługę składanych komponentów, takich jak akordeony i nawigacja.
Zależność od wtyczki: funkcja Collapse wymaga, aby wtyczka przejścia była dołączona do twojej wersji Bootstrap.
Aby zapoznać się z samouczkiem dotyczącym zwijanych, zapoznaj się z samouczkiem Bootstrap Collapse .
Zwiń klasy wtyczek
| Class | Description | Example |
|---|---|---|
| .collapse | Hides the content | |
| .collapse in | Shows the content | |
| .collapsing | Added when the transition starts, and removed when it finishes |
Przez dane-* Atrybuty
Wystarczy dodać data-toggle="collapse" i cel danych do elementu, aby automatycznie przypisać kontrolę nad zwijanym elementem. Atrybut data-target akceptuje selektor CSS, do którego ma zostać zastosowane zwinięcie. Pamiętaj, aby dodać zwinięcie klasy do zwijanego elementu. Jeśli chcesz, aby była domyślnie otwarta, dodaj dodatkowe zajęcia.
Przykład
<button class="btn" data-toggle="collapse" data-target="#demo">Collapsible</button>
<div id="demo" class="collapse">
Some text..
</div>
Wskazówka: aby dodać zarządzanie grupami podobne do akordeonu do zwijanej kontrolki, dodaj atrybut danych data-parent="#selector".
Przez JavaScript
Włącz ręcznie za pomocą:
$('.collapse').collapse()
Opcje zwijania
Opcje można przekazywać za pomocą atrybutów danych lub JavaScript. W przypadku atrybutów danych dołącz nazwę opcji do data-, tak jak w 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 zwijania
W poniższej tabeli wymieniono wszystkie dostępne metody zwijania.
| 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 |
Zwiń wydarzenia
W poniższej tabeli wymieniono wszystkie dostępne zdarzenia zwijania.
| 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) |
Więcej przykładów
Prosty składany
Poniższy przykład sprawia, że przycisk przełącza rozwijanie i zwijanie zawartości innego elementu:
Przykład
<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>
Składany panel
Poniższy przykład przedstawia zwijany panel:
Przykład
<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>
Grupa list zwijanych
Poniżej przedstawiono zwijany panel z grupą list w środku:
Przykład
<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
Poniższy przykład pokazuje prosty akordeon poprzez rozszerzenie komponentu panelu:
Uwaga: Atrybut data-parentzapewnia, że wszystkie zwijane elementy pod określonym elementem nadrzędnym zostaną zamknięte, gdy jeden z zwijanych elementów zostanie wyświetlony.
Przykład
<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>
Rozwiń i Zwiń Przełącz ikonę i tekst
Poniższy przykład zmienia tekst i ikonę otwierania/zamykania podczas otwierania i zamykania zwijanej zawartości:
Przykład
$(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');
});
});
Lub możesz użyć CSS:
Przykład
/* 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";
}