Source

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.

Contona

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

  • .collapsenyumputkeun 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.

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

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>

Conto akordion

Ngagunakeun komponén kartu , anjeun tiasa manjangkeun kabiasaan runtuhna standar pikeun nyieun akordion.

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.
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>

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 kadali dumasar kana naha atanapi henteu unsur collapsible geus dibuka atawa ditutup (via JavaScript, atawa kusabab pamaké micu unsur kontrol sejen ogé dihijikeun ka elemen collapsbile 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 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 cardkelas). 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é .

Tingali dokuméntasi JavaScript kami kanggo inpormasi 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 showmetode 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 hidepadika 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…
})