Bootstrap 4 JS Ineenstort
Vou CSS-klasse in
Vir 'n tutoriaal oor Invoubare items, lees ons Bootstrap Invou-tutoriaal .
| 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 |
Via data-* Kenmerke
Voeg net by data-toggle="collapse"en 'n data-targetby-element om outomaties beheer van 'n opvoubare element toe te ken. Die data-teiken-kenmerk aanvaar 'n CSS-kieser om die ineenstorting op toe te pas. Maak seker dat jy die klasinstorting by die opvoubare element voeg. As jy wil hê dit moet verstek oopmaak, voeg die bykomende klas "show" by.
Voorbeeld
<button class="btn" data-toggle="collapse" data-target="#demo">Collapsible</button>
<div id="demo" class="collapse">
Some text..
</div>
Wenk: Om trekklavieragtige groepbestuur by 'n opvoubare kontrole te voeg, voeg die data-kenmerk data-parent="#selector".
Via JavaScript
Aktiveer handmatig met:
$('.collapse').collapse()
Invou-opsies
Opsies kan deur data-kenmerke of JavaScript deurgegee word. Vir data-kenmerke, voeg die opsienaam by data-, soos 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 |
Invoumetodes
Die volgende tabel lys alle beskikbare invoumetodes.
| 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 |
Vou gebeurtenisse in
Die volgende tabel lys alle beskikbare invou-gebeurtenisse.
| 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) |