Holo i ka ʻike nui Holo i ka hoʻokele docs
in English

Hāneʻe

E hoʻololi i ka ʻike ʻana o ka ʻike ma kāu papahana me kekahi mau papa a me kā mākou JavaScript plugins.

Pehea e hana ai

Hoʻohana ʻia ka plugin JavaScript collapse e hōʻike a hūnā i ka ʻike. Hoʻohana ʻia nā pihi a i ʻole nā ​​heleuma e like me nā mea hoʻomaka i palapala ʻia i nā mea kikoʻī āu e hoʻololi ai. ʻO ka hoʻohiolo ʻana i kahi mea e hoʻolalelale i ka heightmai kona waiwai i kēia manawa i 0. Hāʻawi ʻia pehea e mālama ai ʻo CSS i nā animation, ʻaʻole hiki iā ʻoe ke hoʻohana paddingma kahi .collapsemea. Akā, e hoʻohana i ka papa ma ke ʻano he mea hoʻopili kūʻokoʻa.

ʻO ka hopena animation o kēia māhele e pili ana i ka prefers-reduced-motionnīnau media. E ʻike i ka ʻāpana hoʻohaʻahaʻa o kā mākou palapala hiki ke komo .

Laʻana

Kaomi i nā pihi ma lalo nei e hōʻike a hūnā i kekahi mea ma o nā hoʻololi papa:

  • .collapsehuna mea
  • .collapsinghoʻohana ʻia i ka wā hoʻololi
  • .collapse.showhōʻike maʻiʻo

ʻO ka maʻamau, manaʻo mākou e hoʻohana i kahi pihi me ke data-bs-targetʻano. ʻOiai ʻaʻole ʻōlelo ʻia mai kahi manaʻo semantic, hiki iā ʻoe ke hoʻohana i kahi loulou me ke hrefʻano (a me kahi role="button"). I nā hihia ʻelua, data-bs-toggle="collapse"pono ka mea.

Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
<p>
  <a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  </a>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Button with data-bs-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>

Kaupae

Kākoʻo pū ka plugin collapse i ka hāʻule ʻana. E hoʻohui i ka .collapse-horizontalpapa hoʻololi e hoʻololi i ka widthma kahi o heighta hoʻonoho i kahi widthma ka mea keiki koke. E ʻoluʻolu e kākau i kāu Sass maʻamau, e hoʻohana i nā ʻano inline, a i ʻole e hoʻohana i kā mākou mau pono ākea .

E ʻoluʻolu e hoʻomaopopo ʻoiai he min-heighthoʻonohonoho ka laʻana ma lalo nei e pale i ka pena hou ʻana i kā mākou docs, ʻaʻole koi ʻia kēia. ʻO ka mea widthma luna o ke keiki wale nō e pono ai.

This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
<p>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample">
    Toggle width collapse
  </button>
</p>
<div style="min-height: 120px;">
  <div class="collapse collapse-horizontal" id="collapseWidthExample">
    <div class="card card-body" style="width: 300px;">
      This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
    </div>
  </div>
</div>

Nā pahu hopu lehulehu

Hiki iā A a i <button>ʻole <a>ke hōʻike a hūnā i nā mea he nui ma ke kuhikuhi ʻana iā lākou me kahi mea koho ma kāna ʻano a i hrefʻole data-bs-targetnā ​​hiʻohiʻona. Nui <button>a <a>hiki ke hōʻike a hūnā i kahi mea inā e kuhikuhi kēlā me kēia me kā lākou a i hrefʻole data-bs-targetʻano

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.
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.
<p>
  <a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-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>

Hiki ke komo

E hōʻoia e hoʻohui aria-expandedi ka mea hoʻomalu. Hōʻike maopopo kēia ʻano i ke kūlana o kēia manawa o ka mea hiki ke hoʻopili ʻia i ka mana i ka nānā ʻana i nā mea heluhelu a me nā ʻenehana kōkua like. Inā pani ʻia ka mea hiki ke hoʻoheheʻe ʻia ma ke ʻano paʻamau, pono e loaʻa i ke ʻano o ka mea mana ka waiwai o aria-expanded="false". Inā ua hoʻonoho ʻoe i ka mea hiki ke hoʻoheheʻe ʻia e wehe ʻia ma ka hoʻohana ʻana i ka showpapa, e hoʻonoho aria-expanded="true"ma ka mana. E hoʻololi ʻokoʻa ka plugin i kēia ʻano ma luna o ka mana e pili ana i ka wehe ʻana a i ʻole ka pani ʻana o ka mea collapsible (ma o JavaScript, a i ʻole no ka mea hoʻohana ka mea hoʻohana i kahi mea mana ʻē aʻe i hoʻopaʻa ʻia i ka mea hiki ke collapsible). Inā ʻaʻole he pihi ka ʻelemu HTML o ka mea hoʻomalu (e laʻa, a i <a>ʻole <div>), ka ʻanorole="button"pono e hoʻohui i ka mea.

Inā e huli ana kāu mea hoʻomalu i hoʻokahi mea hiki ke hoʻoheheʻe ʻia - ʻo ia hoʻi ke data-bs-targetkuhikuhi nei ka ʻano i kahi idmea koho - pono ʻoe e hoʻohui i ka aria-controlsʻano i ka mea hoʻomalu, i loaʻa ka idmea hiki ke hoʻoheheʻe ʻia. Hoʻohana ka poʻe heluhelu ʻaoʻao o kēia wā a me nā ʻenehana kōkua like i kēia ʻano e hāʻawi i nā mea hoʻohana i nā ʻaoʻao pōkole hou e hoʻokele pololei i ka mea hiki ke hoʻoheheʻe ʻia.

E hoʻomanaʻo, ʻaʻole i uhi ʻia ka hoʻokō ʻana o Bootstrap i nā pānaʻi kīwī koho like ʻole i wehewehe ʻia ma ka WAI-ARIA Authoring Practices 1.1 accordion pattern - pono ʻoe e hoʻokomo iā ʻoe iho me ka JavaScript maʻamau.

Sass

Nā mea hoʻololi

$transition-collapse:         height .35s ease;
$transition-collapse-width:   width .35s ease;

Nā papa

Hiki ke loaʻa nā papa hoʻololi hāʻule i ka scss/_transitions.scsslike ʻana o kēia mau mea ma nā ʻāpana he nui (collapse and accordion).

.collapse {
  &:not(.show) {
    display: none;
  }
}

.collapsing {
  height: 0;
  overflow: hidden;
  @include transition($transition-collapse);

  &.collapse-horizontal {
    width: 0;
    height: auto;
    @include transition($transition-collapse-width);
  }
}

Hoʻohana

Hoʻohana ka collapse plugin i kekahi mau papa e hoʻokō i ka hāpai kaumaha:

  • .collapsehūnā i ka ʻike
  • .collapse.showhōʻike i ka ʻike
  • .collapsinghoʻohui ʻia i ka wā e hoʻomaka ai ka hoʻololi, a wehe ʻia i ka wā e pau ai

Hiki ke loaʻa kēia mau papa ma _transitions.scss.

Ma o nā hiʻohiʻona ʻikepili

Hoʻohui wale data-bs-toggle="collapse"a me kahi data-bs-targeti ka mea e hāʻawi ʻakomi i ka mana o hoʻokahi a ʻoi aku paha nā mea hiki ke collapsible. data-bs-targetʻAe ka ʻano i kahi mea koho CSS e hoʻopili ai i ka hāʻule . E hōʻoia e hoʻohui i ka papa collapsei ka mea hiki ke collapsible. Inā makemake ʻoe e wehe paʻamau, e hoʻohui i ka papa hou show.

No ka hoʻohui ʻana i ka hoʻokele hui e like me ka accordion i kahi ʻāpana collapsible, hoʻohui i ke ʻano ʻikepili data-bs-parent="#selector". E nānā i ka ʻaoʻao accordion no ka ʻike hou aku.

Ma o JavaScript

E ho'ā me ka lima me:

var collapseElementList = [].slice.call(document.querySelectorAll('.collapse'))
var collapseList = collapseElementList.map(function (collapseEl) {
  return new bootstrap.Collapse(collapseEl)
})

Nā koho

Hiki ke hāʻawi ʻia nā koho ma o nā ʻikepili a i ʻole JavaScript. No nā ʻano ʻikepili, e hoʻopili i ka inoa koho i data-bs-, e like me ka data-bs-parent="".

inoa ʻAno Default wehewehe
parent mea koho | jQuery mea | ʻElemu DOM false Inā hāʻawi ʻia ka makua, a laila e pani ʻia nā mea hiki ke collapsible ma lalo o ka makua i ʻōlelo ʻia ke hōʻike ʻia kēia mea hiki. (e like me ka hana accordion kuʻuna - pili kēia i ka cardpapa). Pono e hoʻonoho ʻia ka ʻano ma ka wahi i hiki ke hoʻoheheʻe ʻia.
toggle boolean true Hoʻololi i ka mea hiki ke collapsible ma ke kāhea ʻana

Nā ʻano hana

Nā ʻano asynchronous a me nā hoʻololi

Asynchronous nā ala API āpau a hoʻomaka i kahi hoʻololi . Hoʻi lākou i ka mea kelepona i ka wā e hoʻomaka ai ka hoʻololi akā ma mua o ka pau ʻana . Eia kekahi, e nānā ʻole ʻia kahi ala e kāhea ai i kahi mea hoʻololi .

E ʻike i kā mākou palapala JavaScript no ka ʻike hou aku .

Ho'ā i kāu ʻike ma ke ʻano he mea hiki ke collapsible. ʻAe i kahi koho koho object.

Hiki iā ʻoe ke hana i kahi hiʻohiʻona hāʻule me ka mea hana, no ka laʻana:

var myCollapse = document.getElementById('myCollapse')
var bsCollapse = new bootstrap.Collapse(myCollapse, {
  toggle: false
})
ʻano hana wehewehe
toggle Hoʻololi i kahi ʻāpana hiki ke hōʻike ʻia a hūnā paha. E hoʻi i ka mea kelepona ma mua o ka hōʻike ʻia ʻana a i ʻole ka hūnā ʻia ʻana o ka mea hiki ke hoʻololi ʻia (ʻo ia hoʻi ma mua o ka hiki ʻana o ka hanana shown.bs.collapsea i ʻole).hidden.bs.collapse
show Hōʻike i kahi mea hiki ke collapsible. E hoʻi i ka mea kelepona ma mua o ka hōʻike ʻia ʻana o ka mea hiki ke hoʻoheheʻe ʻia (e laʻa, ma mua o ka hiki ʻana o ka shown.bs.collapsehanana).
hide Hūnā i kahi mea hiki ke collapsible. E hoʻi i ka mea kelepona ma mua o ka hūnā ʻia ʻana o ka mea hiki ke hoʻoneʻe ʻia (e laʻa, ma mua o ka hiki ʻana o ka hidden.bs.collapsehanana).
dispose Hoʻopau i ka hāʻule ʻana o kahi mea. (Wehe i ka ʻikepili i mālama ʻia ma ka mea DOM)
getInstance ʻO ke ala static e hiki ai iā ʻoe ke kiʻi i ka hiʻohiʻona e pili ana i kahi mea DOM, hiki iā ʻoe ke hoʻohana e like me kēia:bootstrap.Collapse.getInstance(element)
getOrCreateInstance ʻO ke ʻano static e hoʻihoʻi i kahi hiʻohiʻona e pili ana i kahi mea DOM a i ʻole hana i kahi mea hou inā ʻaʻole i hoʻomaka ʻia. Hiki iā ʻoe ke hoʻohana e like me kēia:bootstrap.Collapse.getOrCreateInstance(element)

Nā hanana

Hōʻike ka papa hāʻule o Bootstrap i kekahi mau hanana no ka hoʻopili ʻana i ka hana hāʻule.

ʻAno hanana wehewehe
show.bs.collapse Hoʻomaka koke kēia hanana i ke showkāhea ʻia ʻana o ke ʻano hana.
shown.bs.collapse Hoʻopau ʻia kēia hanana ke ʻike ʻia kahi mea hāʻule i ka mea hoʻohana (e kali no ka hoʻopau ʻana o CSS).
hide.bs.collapse Hoʻopau koke ʻia kēia hanana ke hidekāhea ʻia ke ʻano.
hidden.bs.collapse Hoʻopau ʻia kēia hanana ke hūnā ʻia kahi mea hāʻule mai ka mea hoʻohana (e kali no ka hoʻololi ʻana o CSS).
var myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', function () {
  // do something...
})