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

Sacara umum, kami nyarankeun ngagunakeun tombol sareng data-targetatribut. Sanaos henteu disarankeun tina sudut pandang semantik, anjeun ogé tiasa nganggo tautan sareng hrefatribut (sareng role="button"). Dina duanana kasus, éta data-toggle="collapse"diperlukeun.

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

Horizontal

Plugin runtuh ogé ngadukung runtuh horisontal. Tambahkeun .widthkelas modifier pikeun transisi widthtinimbang heighttur nyetel hiji widthon unsur anak saharita. Ngarasa Luncat nulis Sass custom anjeun sorangan, make gaya inline, atawa ngagunakeun utilitas lebar kami .

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

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

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

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.

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

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 Panduan Praktek Pangarang ARIA - anjeun kedah ngalebetkeun ieu diri anjeun 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="".

Métode

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

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