Rubuh

Togél pisibilitas eusi dina proyék anjeun sareng sababaraha kelas sareng plugins JavaScript kami.

Kumaha gawéna

Plugin JavaScript runtuh dianggo pikeun nunjukkeun sareng nyumputkeun eusi. Tombol atawa jangkar dipaké salaku pemicu nu dipetakeun ka elemen husus Anjeun toggle. Nurunkeun unsur bakal ngahirupkeun heighttina nilai ayeuna ka 0. Dibikeun kumaha CSS handles animasi, Anjeun teu bisa make paddingdina .collapseunsur. Gantina, make kelas salaku unsur wrapping bebas.

Pangaruh animasi tina komponén ieu gumantung kana prefers-reduced-motionpamundut média. Tempo bagian gerak ngurangan tina dokuméntasi aksés kami .

Contona

Pencét tombol di handap pikeun nunjukkeun sareng nyumputkeun unsur sanés ku parobihan kelas:

.collapsenyumput eusi
.collapsingditerapkeun dina mangsa transisi
.collapse.shownembongkeun eusi

Anjeun tiasa nganggo tautan sareng hrefatribut, atanapi tombol sareng data-targetatribut. Dina duanana kasus, éta data-toggle="collapse"diperlukeun.

Link sareng href

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>

Sababaraha udagan

A <button>atanapi <a>tiasa nunjukkeun sareng nyumputkeun sababaraha elemen ku ngarujuk kana pamilih JQuery dina atribut hrefatanapi . data-targetSababaraha <button>atanapi <a>tiasa nunjukkeun sareng nyumputkeun unsur upami aranjeunna masing-masing ngarujuk kana atribut hrefatanapi data-targetatributna

Togél unsur kahiji

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>

Conto akordion

Ngagunakeun komponén kartu , anjeun tiasa manjangkeun kabiasaan runtuhna standar pikeun nyieun akordion. Pikeun leres ngahontal gaya akordion, pastikeun ngagunakeun .accordionsalaku wrapper a.

Anim pariatur cliche reprehenderit, enim eiusmod hirup tinggi accusamus Terry richardson ad cumi. 3 ajag bulan officia aute, non cupidatat skateboard dolor brunch. Truk dahareun quinoa nesciunt laborum eiusmod. Brunch 3 ajag bulan tempor, sunt aliqua nempatkeun manuk dina eta cumi tunggal-asal kopi nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Iklan vegan excepteur jagal wakil lomo. Leggings occaecat karajinan bir ladang-to-méja, denim atah estetika synth nesciunt Anjeun meureun geus teu ngadéngé éta 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">
      <h2 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>
      </h2>
    </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">
      <h2 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>
      </h2>
    </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">
      <h2 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>
      </h2>
    </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>

Aksesibilitas

Pastikeun pikeun nambahkeun aria-expandedkana elemen kontrol. atribut ieu eksplisit conveys kaayaan kiwari unsur collapsible dihijikeun ka kontrol ka pamiarsa layar tur téhnologi pitulung sarupa. Lamun unsur collapsible ditutup sacara standar, atribut dina elemen kontrol kudu boga nilai aria-expanded="false". Upami anjeun parantos nyetél unsur anu tiasa digulung janten kabuka sacara standar nganggo showkelas, setel aria-expanded="true"dina kontrol. Plugin bakal otomatis toggle atribut ieu dina kontrol dumasar kana naha atanapi henteu unsur collapsible geus dibuka atawa ditutup (via JavaScript, atawa kusabab pamaké micu elemen kontrol sejen ogé dihijikeun ka elemen collapsible sarua). Lamun elemen HTML kontrol urang teu tombol (misalna hiji <a>atawa <div>), atributrole="button"kudu ditambahkeun kana unsur.

Lamun unsur kontrol anjeun nargétkeun hiji unsur collapsible tunggal - ie data-targetatribut nujul ka idpamilih - Anjeun kedah nambahkeun aria-controlsatribut ka elemen kontrol, ngandung idunsur collapsible. Pamiarsa layar modéren sareng téknologi pitulung anu sami ngagunakeun atribut ieu pikeun nyayogikeun potong kompas tambahan pikeun pangguna pikeun langsung napigasi ka unsur anu tiasa dilipat.

Catet yén palaksanaan Bootstrap ayeuna henteu nutupan rupa-rupa interaksi keyboard anu dijelaskeun dina pola akordion Praktek Pangarang WAI-ARIA 1.1 - anjeun kedah ngalebetkeun ieu sorangan sareng JavaScript khusus.

Pamakéan

Plugin runtuh ngagunakeun sababaraha kelas pikeun nanganan angkat beurat:

.collapsenyumputkeun eusi
.collapse.shownembongkeun eusi
.collapsingditambahkeun nalika transisi dimimitian, sarta dihapus nalika rengse

kelas ieu bisa kapanggih dina _transitions.scss.

Via atribut data

Ngan tambahkeun data-toggle="collapse"na a data-targetkana unsur pikeun otomatis napelkeun kadali hiji atawa leuwih elemen collapsible. Atribut data-targetnampi pamilih CSS pikeun nerapkeun runtuhna. Pastikeun pikeun nambahkeun kelas collapseka elemen collapsible. Upami anjeun hoyong kabuka sacara standar, tambahkeun kelas tambahan show.

Pikeun nambahkeun manajemén grup kawas akordion ka wewengkon collapsible, tambahkeun atribut data data-parent="#selector". Tingali kana demo pikeun ningali ieu aksi.

Ngaliwatan JavaScript

Aktipkeun sacara manual nganggo:

$('.collapse').collapse()

Pilihan

Pilihan bisa diliwatan via atribut data atawa JavaScript. Pikeun atribut data, tambahkeun nami pilihan ka data-, sapertos dina data-parent="".

Ngaran	Tipe	Default	Katerangan
kolot	pamilih \| objék jQuery \| unsur DOM	palsu	Upami indungna disayogikeun, maka sadaya elemen anu tiasa dilipat dina indungna anu ditangtukeun bakal ditutup nalika item anu tiasa dilipat ieu ditingalikeun. (sarupa jeung kabiasaan akordion tradisional - ieu gumantung kana `card`kelas). Atribut kedah disetél dina daérah anu tiasa dilipat.
togél	boolean	leres	Toggles unsur collapsible on invocation

Métode

Métode Asynchronous sareng transisi

Sadaya metode API henteu sinkron sareng ngamimitian transisi . Aranjeunna balik deui ka panelepon pas transisi dimimitian tapi saméméh éta ends . Sajaba ti éta, panggero métode dina komponén transisi bakal dipaliré .

Tempo dokuméntasi JavaScript kami pikeun inpo nu leuwih lengkep .

`.collapse(options)`

Aktipkeun eusi anjeun salaku unsur collapsible. Narima hiji pilihan pilihan object.

$('#myCollapsible').collapse({
  toggle: false
})

`.collapse('toggle')`

Toggles unsur collapsible mun ditémbongkeun atawa disumputkeun. Mulih ka nu nelepon saméméh unsur collapsible sabenerna geus ditémbongkeun atawa disumputkeun (ie saméméh shown.bs.collapseatawa hidden.bs.collapsekajadian lumangsung).

`.collapse('show')`

Némbongkeun unsur collapsible. Mulih ka panelepon saméméh unsur collapsible sabenerna geus ditémbongkeun (ie saméméh shown.bs.collapseacara lumangsung).

`.collapse('hide')`

Nyumputkeun unsur anu tiasa dilipat. Mulih ka panelepon saméméh unsur collapsible sabenerna disumputkeun (ie saméméh hidden.bs.collapseacara lumangsung).

`.collapse('dispose')`

Ngancurkeun runtuhna hiji unsur.

Kajadian

Kelas runtuh Bootstrap ngungkabkeun sababaraha acara pikeun ngaitkeun kana fungsionalitas runtuh.

Jenis Acara	Katerangan
show.bs.collapse	Kajadian ieu langsung hurung nalika `show`metode conto disebut.
ditémbongkeun.bs.collapse	Kajadian ieu dipecat nalika unsur runtuh parantos katingali ku pangguna (bari ngantosan transisi CSS réngsé).
hide.bs.collapse	Kajadian ieu dipecat langsung nalika `hide`padika geus disebut.
disumputkeun.bs.collapse	Acara ieu dipecat nalika unsur runtuhna disumputkeun ti pangguna (bari ngadagoan transisi CSS réngsé).

$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something...
})