JS Collapse (collapse.js)
Ottenere gli stili di base e supporto flessibile per i componenti comprimibili come fisarmoniche e di navigazione.
dipendenza Plugin: Riduci richiede le transizioni plugin per essere incluso nella versione di Bootstrap.
Per un tutorial su Collapsibles, leggere la nostra Bootstrap Collapse tutorial .
The Collapse Plugin Classes
| Classe | Descrizione | Esempio |
|---|---|---|
| .collapse | Nasconde il contenuto | Provalo |
| .collapse in | Mostra il contenuto | Provalo |
| .collapsing | Aggiunto quando la transizione inizia, e rimossi quando finisce | Provalo |
Via data-* Attributi
Basta aggiungere data-toggle="collapse" e un data-obiettivo di elemento per assegnare automaticamente il controllo di un elemento pieghevole. L'attributo data-obiettivo accetta un selettore CSS per applicare il crollo a. Assicurarsi di aggiungere il crollo della classe all'elemento pieghevole. Se vuoi che per difetto aperta, aggiungere la classe aggiuntiva.
Esempio
<button class="btn" data-toggle="collapse" data-target="#demo">Collapsible</button>
<div id="demo" class="collapse">
Some text..
</div>
Prova tu stesso " Suggerimento: per aggiungere la gestione dei gruppi fisarmonica a un controllo pieghevole, aggiungere l'attributo dati di data-parent="#selector" .
Via JavaScript
Attivare manualmente con:
$('.collapse').collapse()Opzioni Collapse
Le opzioni possono essere passati attraverso gli attributi di dati o JavaScript. Per gli attributi dei dati, aggiungere il nome opzione per data-, come nel data-parent="" .
| Nome | Digitare | Predefinito | Descrizione |
|---|---|---|---|
| parent | selector | false | Tutti gli elementi pieghevoli sotto il genitore specificato saranno chiusi quando questo articolo pieghevole viene mostrato. (Simile al comportamento fisarmonica tradizionale - questo dipende dalla classe di pannello) - vedi esempio qui sotto |
| toggle | boolean | true | Alterna l'elemento pieghevole su invocazione |
Metodi Collapse
La seguente tabella elenca i metodi Chiudi tutto disponibili.
| metodo | Descrizione | Provalo |
|---|---|---|
| .collapse( options ) | Attiva l'elemento pieghevole con un'opzione. Vedere opzioni di cui sopra per i valori validi | |
| .collapse("toggle") | Alterna l'elemento pieghevole | Provalo |
| .collapse("show") | Mostra l'elemento pieghevole | Provalo |
| .collapse("hide") | Nasconde l'elemento pieghevole | Provalo |
Collapse Eventi
La seguente tabella elenca gli eventi di collasso tutti disponibili.
| Evento | Descrizione | Provalo |
|---|---|---|
| show.bs.collapse | Si verifica quando l'elemento pieghevole è in procinto di essere mostrato | Provalo |
| shown.bs.collapse | Si verifica quando l'elemento pieghevole è completamente mostrato (dopo le transizioni CSS hanno completato) | Provalo |
| hide.bs.collapse | Si verifica quando l'elemento pieghevole è in procinto di essere nascosto | Provalo |
| hidden.bs.collapse | Si verifica quando l'elemento pieghevole è completamente nascosta (dopo le transizioni CSS hanno completato) | Provalo |
Esempi
semplice pieghevole
L'esempio seguente fa un pulsante di commutazione del contenuto in espansione e la compressione di un altro elemento:
Esempio
<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> Prova tu stesso " Pannello comprimibile
L'esempio seguente mostra un pannello pieghevole:
Esempio
<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> Prova tu stesso " Pieghevole List Group
Quanto segue mostra un pannello pieghevole con un gruppo lista all'interno:
Esempio
<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> Prova tu stesso " Fisarmonica
L'esempio seguente mostra una semplice fisarmonica estendendo la componente del pannello:
Nota: I data-parent attributo fa in modo che tutti gli elementi pieghevoli sotto il genitore specificato saranno chiusi quando viene visualizzato uno dei voce pieghevole.
Esempio
<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> Prova tu stesso " Espandere e comprimere Toggle Icona e testo
L'esempio seguente modifica la chiusura testo aperto / e icona quando aprire e chiudere il contenuto pieghevole:
Esempio
$(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');
});
}); Prova tu stesso " Oppure è possibile utilizzare i CSS:
Esempio
/* 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";
} Prova tu stesso "