Crollo
Attiva o disattiva la visibilità dei contenuti nel tuo progetto con alcune classi e i nostri plugin JavaScript.
Come funziona
Il plug-in JavaScript di compressione viene utilizzato per mostrare e nascondere il contenuto. I pulsanti o gli ancoraggi vengono utilizzati come attivatori che vengono mappati su elementi specifici che si attivano. La compressione di un elemento animerà il height
dal suo valore corrente a 0
. Dato il modo in cui CSS gestisce le animazioni, non puoi usarle padding
su un .collapse
elemento. Utilizzare invece la classe come elemento di avvolgimento indipendente.
prefers-reduced-motion
media query. Vedi la
sezione movimento ridotto della nostra documentazione sull'accessibilità .
Esempio
Fai clic sui pulsanti sottostanti per mostrare e nascondere un altro elemento tramite i cambi di classe:
.collapse
nasconde il contenuto.collapsing
viene applicato durante le transizioni.collapse.show
mostra il contenuto
In genere, si consiglia di utilizzare un pulsante con l' data-target
attributo. Sebbene non sia consigliato da un punto di vista semantico, puoi anche utilizzare un collegamento con l' href
attributo (e a role="button"
). In entrambi i casi data-toggle="collapse"
è richiesto.
<p>
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Button with data-target
</button>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-body">
Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
</div>
</div>
Orizzontale
Il plug-in di compressione supporta anche la compressione orizzontale. Aggiungi la .width
classe modificatore per passare a width
invece di height
e imposta a width
sull'elemento figlio immediato. Sentiti libero di scrivere il tuo Sass personalizzato, utilizzare gli stili in linea o utilizzare le nostre utilità di larghezza .
min-height
set per evitare ridisegni eccessivi nei nostri documenti, questo non è esplicitamente richiesto.
È richiesto solo l' width
elemento on the child.
<p>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample">
Toggle width collapse
</button>
</p>
<div style="min-height: 120px;">
<div class="collapse width" id="collapseWidthExample">
<div class="card card-body" style="width: 320px;">
This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
</div>
</div>
</div>
Obiettivi multipli
A <button>
o <a>
può mostrare e nascondere più elementi facendo loro riferimento con un selettore JQuery nel suo attributo href
o . data-target
Multiplo <button>
o <a>
può mostrare e nascondere un elemento se ciascuno di essi vi fa riferimento con il proprio attributo href
odata-target
Attiva/disattiva il primo elemento
<p>
<a class="btn btn-primary" data-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button>
</p>
<div class="row">
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample1">
<div class="card card-body">
Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
</div>
</div>
</div>
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample2">
<div class="card card-body">
Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
</div>
</div>
</div>
</div>
Esempio di fisarmonica
Utilizzando il componente card , puoi estendere il comportamento di compressione predefinito per creare una fisarmonica. Per ottenere correttamente lo stile della fisarmonica, assicurati di usarlo .accordion
come involucro.
.show
classe.
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header" id="headingOne">
<h2 class="mb-0">
<button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Collapsible Group Item #1
</button>
</h2>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body">
Some placeholder content for the first accordion panel. This panel is shown by default, thanks to the <code>.show</code> class.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h2 class="mb-0">
<button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Collapsible Group Item #2
</button>
</h2>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
<div class="card-body">
Some placeholder content for the second accordion panel. This panel is hidden by default.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingThree">
<h2 class="mb-0">
<button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Collapsible Group Item #3
</button>
</h2>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
<div class="card-body">
And lastly, the placeholder content for the third and final accordion panel. This panel is hidden by default.
</div>
</div>
</div>
</div>
Accessibilità
Assicurati di aggiungere aria-expanded
all'elemento di controllo. Questo attributo trasmette esplicitamente lo stato attuale dell'elemento comprimibile legato al controllo a lettori di schermo e tecnologie assistive simili. Se l'elemento comprimibile è chiuso per impostazione predefinita, l'attributo sull'elemento di controllo dovrebbe avere un valore di aria-expanded="false"
. Se hai impostato l'elemento comprimibile in modo che sia aperto per impostazione predefinita usando la show
classe, impostalo aria-expanded="true"
invece sul controllo. Il plug-in attiverà automaticamente questo attributo sul controllo in base al fatto che l'elemento comprimibile sia stato aperto o chiuso o meno (tramite JavaScript o perché l'utente ha attivato un altro elemento di controllo anch'esso legato allo stesso elemento comprimibile). Se l'elemento HTML dell'elemento di controllo non è un pulsante (ad esempio, an <a>
o <div>
), l'attributorole="button"
deve essere aggiunto all'elemento.
Se il tuo elemento di controllo ha come target un singolo elemento comprimibile, ovvero l' data-target
attributo punta a un id
selettore, dovresti aggiungere l' aria-controls
attributo all'elemento di controllo, contenente l' id
elemento comprimibile. I moderni lettori di schermo e tecnologie assistive simili utilizzano questo attributo per fornire agli utenti scorciatoie aggiuntive per navigare direttamente all'elemento comprimibile stesso.
Nota che l'attuale implementazione di Bootstrap non copre le varie interazioni con la tastiera descritte nel pattern a fisarmonica di ARIA Authoring Practices Guide : dovrai includerle tu stesso con JavaScript personalizzato.
Utilizzo
Il plugin di compressione utilizza alcune classi per gestire il sollevamento di carichi pesanti:
.collapse
nasconde il contenuto.collapse.show
mostra il contenuto.collapsing
viene aggiunto all'inizio della transizione e rimosso al termine
Queste classi possono essere trovate in _transitions.scss
.
Tramite attributi di dati
Basta aggiungere data-toggle="collapse"
e data-target
a all'elemento per assegnare automaticamente il controllo di uno o più elementi comprimibili. L' data-target
attributo accetta un selettore CSS a cui applicare la compressione. Assicurati di aggiungere la classe collapse
all'elemento comprimibile. Se desideri che sia aperto di default, aggiungi la classe aggiuntiva show
.
Per aggiungere la gestione dei gruppi a fisarmonica a un'area comprimibile, aggiungi l'attributo data data-parent="#selector"
. Fare riferimento alla demo per vederlo in azione.
Tramite JavaScript
Abilita manualmente con:
$('.collapse').collapse()
Opzioni
Le opzioni possono essere passate tramite attributi di dati o JavaScript. Per gli attributi dei dati, aggiungere il nome dell'opzione a data-
, come in data-parent=""
.
Nome | Tipo | Predefinito | Descrizione |
---|---|---|---|
genitore | selettore | oggetto jQuery | elemento DOM | falso | Se viene fornito il genitore, tutti gli elementi comprimibili sotto il genitore specificato verranno chiusi quando viene mostrato questo elemento comprimibile. (simile al comportamento della fisarmonica tradizionale - dipende dalla card classe). L'attributo deve essere impostato sull'area comprimibile di destinazione. |
alternare | booleano | VERO | Attiva o disattiva l'elemento comprimibile durante l'invocazione |
Metodi
Metodi e transizioni asincrone
Tutti i metodi API sono asincroni e avviano una transizione . Ritornano al chiamante non appena la transizione è iniziata ma prima che termini . Inoltre, una chiamata al metodo su un componente in transizione verrà ignorata .
Consulta la nostra documentazione JavaScript per ulteriori informazioni .
.collapse(options)
Attiva il tuo contenuto come elemento comprimibile. Accetta opzioni opzionali object
.
$('#myCollapsible').collapse({
toggle: false
})
.collapse('toggle')
Attiva o disattiva un elemento comprimibile in mostrato o nascosto. Ritorna al chiamante prima che l'elemento comprimibile sia stato effettivamente mostrato o nascosto (cioè prima che si verifichi l' evento shown.bs.collapse
o hidden.bs.collapse
).
.collapse('show')
Mostra un elemento comprimibile. Ritorna al chiamante prima che l'elemento comprimibile sia stato effettivamente mostrato (cioè prima shown.bs.collapse
che si verifichi l'evento).
.collapse('hide')
Nasconde un elemento comprimibile. Ritorna al chiamante prima che l'elemento comprimibile sia stato effettivamente nascosto (cioè prima hidden.bs.collapse
che si verifichi l'evento).
.collapse('dispose')
Distrugge il collasso di un elemento.
Eventi
La classe di compressione di Bootstrap espone alcuni eventi per l'aggancio alla funzionalità di compressione.
Tipo di evento | Descrizione |
---|---|
show.bs.collasso | Questo evento viene attivato immediatamente quando show viene chiamato il metodo dell'istanza. |
mostrato.bs.collasso | Questo evento viene attivato quando un elemento di compressione è stato reso visibile all'utente (attenderà il completamento delle transizioni CSS). |
nascondi.bs.comprimi | Questo evento viene generato immediatamente quando il hide metodo è stato chiamato. |
nascosto.bs.collasso | Questo evento viene attivato quando un elemento di compressione è stato nascosto all'utente (attenderà il completamento delle transizioni CSS). |
$('#myCollapsible').on('hidden.bs.collapse', function () {
// do something...
})