Bootstrap JS Ineenstort
JS Collapse (collapse.js)
Kry basisstyle en buigsame ondersteuning vir opvoubare komponente soos trekklaviere en navigasie.
Inprop-afhanklikheid: Invou vereis dat die oorgang-inprop by jou weergawe van Bootstrap ingesluit moet word.
Vir 'n tutoriaal oor Invoubare items, lees ons Bootstrap Invou-tutoriaal .
Die Invou-inpropklasse
| Class | Description | Example |
|---|---|---|
| .collapse | Hides the content | |
| .collapse in | Shows the content | |
| .collapsing | Added when the transition starts, and removed when it finishes |
Via data-* Kenmerke
Voeg net data-toggle="collapse" en 'n data-teiken by element by 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 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 |
|---|---|---|---|
| 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 |
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 |
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) |
Meer voorbeelde
Eenvoudig opvoubaar
Die volgende voorbeeld laat 'n knoppie die uitbreidende en invouende inhoud van 'n ander element wissel:
Voorbeeld
<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>
Opvoubare paneel
Die volgende voorbeeld toon 'n opvoubare paneel:
Voorbeeld
<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>
Opvoubare lysgroep
Die volgende wys 'n opvoubare paneel met 'n lysgroep binne:
Voorbeeld
<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>
Trekklavier
Die volgende voorbeeld toon 'n eenvoudige trekklavier deur die paneelkomponent uit te brei:
Let wel: Die data-parentkenmerk maak seker dat alle opvoubare elemente onder die gespesifiseerde ouer gesluit sal wees wanneer een van die opvoubare items gewys word.
Voorbeeld
<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>
Vou uit en vou in Wissel ikoon en teks
Die volgende voorbeeld verander die oop/toe-teks en ikoon wanneer die opvoubare inhoud oop- en toegemaak word:
Voorbeeld
$(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');
});
});
Of jy kan CSS gebruik:
Voorbeeld
/* 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";
}