Source

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, heighttā pašreizējā vērtība tiks animēta uz 0. Ņemot vērā to, kā CSS apstrādā animācijas, to nevar izmantot paddingelementam .collapse. Tā vietā izmantojiet klasi kā neatkarīgu iesaiņojuma elementu.

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:

  • .collapseslēpj saturu
  • .collapsingtiek izmantots pāreju laikā
  • .collapse.showparāda saturu

Varat izmantot saiti ar hrefatribūtu vai pogu ar data-targetatribūtu. Abos gadījumos data-toggle="collapse"ir nepieciešams.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. 
<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">
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  </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ā hrefvai data-targetatribūtā. Vairāki <button>vai <a>var parādīt un paslēpt elementu, ja katrs uz to atsaucas ar savu hrefvai data-targetatribūtu

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. 
<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">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
      </div>
    </div>
  </div>
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample2">
      <div class="card card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
      </div>
    </div>
  </div>
</div>

Akordeona piemērs

Izmantojot kartes komponentu, varat paplašināt noklusējuma sabrukšanas darbību, lai izveidotu akordeonu.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad kalmārs. 3 wolf moon officia aute, non cupidatat skateboard dolor branch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a put on it kalmārs vienas izcelsmes kafija nulla guessnda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Reklāma vegan izņemoteur miesnieks vice lomo. Legingi occaecat amatniecības alus no saimniecības līdz galdam, neapstrādāta džinsa estētiskā sintēze, iespējams, neesat par tiem dzirdējuši accusamus labore ilgtspējīgu VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. 
<div class="accordion" id="accordionExample">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h5 class="mb-0">
        <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </button>
      </h5>
    </div>

    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingTwo">
      <h5 class="mb-0">
        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </button>
      </h5>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingThree">
      <h5 class="mb-0">
        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </button>
      </h5>
    </div>
    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

Pieejamība

Noteikti pievienojiet aria-expandedvadī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". showJa, 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 sakļaujamo 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-targetatribūts norāda uz idatlasītāju, jums jāpievieno aria-controlsatribūts vadības elementam, kas satur idsaliekamā 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 WAI-ARIA autorēšanas prakses 1.1 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:

  • .collapseslēpj saturu
  • .collapse.showparāda saturu
  • .collapsingtiek 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-targetakceptē CSS atlasītāju, kam lietot sakļauto. Noteikti pievienojiet klasi collapsesaliekamajam 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 cardklases). 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 .

Plašāku informāciju skatiet mūsu JavaScript dokumentācijā.

.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.collapsevai ).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.collapsenotikuma).

.collapse('hide')

Paslēpj saliekamu elementu. Atgriežas pie zvanītāja, pirms saliekamais elements ir faktiski paslēpts (ti, pirms hidden.bs.collapsenotikuma).

.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 showtiek 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 hidemetode 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…
})