Sakļaut
Pārslēdziet sava projekta satura redzamību, izmantojot dažas klases un mūsu JavaScript spraudņus.
Kā tas strādā
Sakļautais JavaScript spraudnis tiek izmantots, lai parādītu un paslēptu saturu. Pogas vai enkuri tiek izmantoti kā aktivizētāji, kas ir saistīti ar konkrētiem elementiem, kurus pārslēdzat. Sakļaujot elementu, height
tā pašreizējā vērtība tiks animēta uz 0
. Ņemot vērā to, kā CSS apstrādā animācijas, to nevar izmantot padding
elementam .collapse
. Tā vietā izmantojiet klasi kā neatkarīgu iesaiņojuma elementu.
prefers-reduced-motion
multivides vaicājuma. Skatiet
mūsu pieejamības dokumentācijas sadaļu samazinātas kustības .
Piemērs
Noklikšķiniet uz tālāk esošajām pogām, lai parādītu un paslēptu citu elementu, veicot klases izmaiņas:
.collapse
slēpj saturu.collapsing
tiek izmantots pāreju laikā.collapse.show
parāda saturu
Parasti mēs iesakām izmantot pogu ar data-target
atribūtu. Lai gan no semantiskā viedokļa tas nav ieteicams, varat izmantot arī saiti ar href
atribūtu (un role="button"
). Abos gadījumos data-toggle="collapse"
ir nepieciešams.
<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>
Horizontāli
Sakļaušanas spraudnis atbalsta arī horizontālo sabrukšanu. Pievienojiet .width
modifikatora klasi, lai pārietu uz width
tā vietā, height
un iestatiet a width
tiešajam bērna elementam. Jūtieties brīvi rakstīt savu pielāgoto Sass, izmantojiet iekļautos stilus vai izmantojiet mūsu platuma utilītas .
min-height
noteikts, lai mūsu dokumentos izvairītos no pārmērīgas pārkrāsošanas, tas nav tieši pieprasīts.
Ir nepieciešams tikai width
elements 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>
Vairāki mērķi
A <button>
vai <a>
var parādīt un paslēpt vairākus elementus, atsaucoties uz tiem ar JQuery atlasītāju savā href
vai data-target
atribūtā. Vairāki <button>
vai <a>
var parādīt un paslēpt elementu, ja katrs uz to atsaucas ar savu href
vai data-target
atribūtu
<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>
Akordeona piemērs
Izmantojot kartes komponentu, varat paplašināt noklusējuma sabrukšanas darbību, lai izveidotu akordeonu. Lai pareizi sasniegtu akordeona stilu, noteikti izmantojiet .accordion
kā iesaiņojumu.
.show
klasei.
<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>
Pieejamība
Noteikti pievienojiet aria-expanded
vadības elementu. Šis atribūts skaidri norāda uz ekrāna lasītājiem un līdzīgām palīgtehnoloģijām ar vadīklu saistītā saliekamā elementa pašreizējo stāvokli. Ja saliekamais elements ir aizvērts pēc noklusējuma, vadības elementa atribūta vērtībai ir jābūt aria-expanded="false"
. show
Ja, izmantojot klasi, pēc noklusējuma esat iestatījis saliekamo elementu atvērtu, aria-expanded="true"
tā vietā iestatiet vadīklu. Spraudnis automātiski pārslēgs šo atribūtu vadīklā, pamatojoties uz to, vai saliekamais elements ir atvērts vai aizvērts (izmantojot JavaScript vai tāpēc, ka lietotājs aktivizēja citu vadības elementu, kas arī ir saistīts ar to pašu saliekamo elementu). Ja vadības elementa HTML elements nav poga (piemēram, <a>
vai <div>
), atribūtsrole="button"
jāpievieno elementam.
Ja jūsu vadības elements ir vērsts uz vienu saliekamo elementu, ti, data-target
atribūts norāda uz id
atlasītāju, jums jāpievieno aria-controls
atribūts vadības elementam, kas satur id
saliekamā elementa elementu. Mūsdienu ekrāna lasītāji un līdzīgas palīgtehnoloģijas izmanto šo atribūtu, lai nodrošinātu lietotājiem papildu īsceļus, kas ļauj pāriet tieši uz saliekamo elementu.
Ņemiet vērā, ka Bootstrap pašreizējā ieviešana neaptver dažādas tastatūras mijiedarbības, kas aprakstītas ARIA autorēšanas prakses rokasgrāmatas akordeona shēmā — jums tās būs jāiekļauj pielāgotajā JavaScript.
Lietošana
Sakšanas spraudnis izmanto dažas klases, lai apstrādātu smagumu:
.collapse
slēpj saturu.collapse.show
parāda saturu.collapsing
tiek pievienots, kad sākas pāreja, un noņemts, kad tā beidzas
Šīs nodarbības var atrast _transitions.scss
.
Izmantojot datu atribūtus
Vienkārši pievienojiet elementam data-toggle="collapse"
un a data-target
, lai automātiski piešķirtu viena vai vairāku saliekamo elementu vadību. Atribūts data-target
akceptē CSS atlasītāju, kam lietot sakļauto. Noteikti pievienojiet klasi collapse
saliekamajam elementam. Ja vēlaties, lai tas tiktu atvērts pēc noklusējuma, pievienojiet papildu klasi show
.
Lai saliekamam apgabalam pievienotu akordeonam līdzīgu grupu pārvaldību, pievienojiet datu atribūtu data-parent="#selector"
. Skatiet demonstrāciju, lai redzētu to darbībā.
Izmantojot JavaScript
Iespējot manuāli, izmantojot:
$('.collapse').collapse()
Iespējas
Opcijas var nodot, izmantojot datu atribūtus vai JavaScript. Datu atribūtiem pievienojiet opcijas nosaukumu data-
, tāpat kā data-parent=""
.
Vārds | Tips | Noklusējums | Apraksts |
---|---|---|---|
vecāks | atlasītājs | jQuery objekts | DOM elements | viltus | Ja ir norādīts vecāks, visi sakļaujamie elementi zem norādītā vecāka tiks aizvērti, kad tiek parādīts šis saliekamais vienums. (līdzīgi tradicionālajai akordeona uzvedībai - tas ir atkarīgs no card klases). Atribūts ir jāiestata mērķa saliekamajā apgabalā. |
pārslēgt | Būla | taisnība | Pārslēdz saliekamo elementu izsaukšanas laikā |
Metodes
Asinhronās metodes un pārejas
Visas API metodes ir asinhronas un sāk pāreju . Viņi atgriežas pie zvanītāja, tiklīdz ir sākta pāreja, bet pirms tās beigām . Turklāt pārejas komponenta metodes izsaukums tiks ignorēts .
.collapse(options)
Aktivizē jūsu saturu kā saliekamu elementu. Pieņem izvēles opcijas object
.
$('#myCollapsible').collapse({
toggle: false
})
.collapse('toggle')
Pārslēdz saliekamo elementu uz parādīto vai paslēpto. Atgriežas pie zvanītāja, pirms saliekamais elements ir faktiski parādīts vai paslēpts (ti, pirms notiek notikums shown.bs.collapse
vai ).hidden.bs.collapse
.collapse('show')
Parāda saliekamu elementu. Atgriežas pie zvanītāja, pirms saliekamais elements ir faktiski parādīts (ti, pirms shown.bs.collapse
notikuma).
.collapse('hide')
Paslēpj saliekamu elementu. Atgriežas pie zvanītāja, pirms saliekamais elements ir faktiski paslēpts (ti, pirms hidden.bs.collapse
notikuma).
.collapse('dispose')
Iznīcina elementa sabrukumu.
Pasākumi
Bootstrap sabrukšanas klase atklāj dažus notikumus, lai piesaistītu sabrukšanas funkcionalitāti.
Pasākuma veids | Apraksts |
---|---|
parādīt.bs.sabrukt | Šis notikums tiek aktivizēts nekavējoties, kad show tiek izsaukta instances metode. |
parādīts.bs.sabrukums | Šis notikums tiek aktivizēts, kad sakļautais elements ir padarīts redzams lietotājam (pagaidīs, kamēr CSS pārejas tiks pabeigtas). |
hide.bs.collapse | Šis notikums tiek aktivizēts nekavējoties, kad hide metode ir izsaukta. |
paslēpts.bs.sabrukums | Šis notikums tiek aktivizēts, kad sakļautais elements ir paslēpts no lietotāja (tiks gaidīts, kamēr CSS pārejas tiks pabeigtas). |
$('#myCollapsible').on('hidden.bs.collapse', function () {
// do something...
})