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 hāʻule ʻana o kahi mea e hoʻolalelale i ka heightwaiwai mai 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

Hiki iā ʻoe ke hoʻohana i kahi loulou me ka hrefʻano, a i ʻole ke pihi me ka data-targetʻano. I nā hihia ʻelua, data-toggle="collapse"pono ka mea.

Ka loulou me ka 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>

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 JQuery ma kāna ʻano a i hrefʻole data-targetke ʻano. 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-targetʻano

E hoʻololi i ka mea mua

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>

Laʻana Accordion

Ke hoʻohana nei i ka ʻāpana kāleka , hiki iā ʻoe ke hoʻolōʻihi i ka hana hāʻule paʻamau e hana i kahi accordion. No ka hoʻokō pono ʻana i ke ʻano accordion, e ʻoluʻolu e hoʻohana .accordionma ke ʻano he wīwī.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Kaʻa meaʻai quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua kau i ka manu ma luna o ka hee hoʻokahi kumu kope 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 ʻaʻole paha ʻoe i lohe iā lākou 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>

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 like ʻole). Inā ʻaʻole he pihi ka mea HTML o ka mea hoʻomalu (e laʻa, he 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-targetkuhikuhi nei ka ʻano i kahi idmea koho - pono ʻoe e hoʻohui i ka aria-controlsʻano i ka mea hoʻomalu, i loko ido ka mea hiki ke collapsible. 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 collapsible ponoʻī.

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

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

E hoʻohui wale data-toggle="collapse"a me kahi data-targeti ka mea e hāʻawi ʻakomi i ka mana o hoʻokahi a ʻoi aku paha nā mea hiki ke collapsible. data-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, e hoʻohui i ke ʻano ʻikepili data-parent="#selector". E nānā i ka demo e ʻike i kēia i ka hana.

Ma o JavaScript

E ho'ā me ka lima me:

$('.collapse').collapse()

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-, e like me ka data-parent="".

inoa	ʻAno	Default	wehewehe
makua	mea koho \| jQuery mea \| ʻElemu DOM	wahahee	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 `card`papa). Pono e hoʻonoho ʻia ka ʻano ma ka wahi i hiki ke hoʻoheheʻe ʻia.
hoʻololi	boolean	ʻoiaʻiʻo	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 .

`.collapse(options)`

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

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

`.collapse('toggle')`

Hoʻololi i kahi mea hiki ke hōʻike ʻia a hūnā ʻia paha. E hoʻi i ka mea kelepona ma mua o ka hōʻike ʻia ʻana a i ʻole huna ʻia o ka mea hiki ke hoʻoneʻe ʻia (ʻo ia hoʻi ma mua o ka hiki ʻana o ka hanana shown.bs.collapsea i ʻole).hidden.bs.collapse

`.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 (ʻo ia hoʻi ma mua o ka hiki ʻana o ka shown.bs.collapsehanana).

`.collapse('hide')`

Hūnā i kahi mea hiki ke hoʻoheheʻe ʻia. E hoʻi i ka mea kelepona ma mua o ka hūnā ʻia ʻana o ka mea hiki ke hoʻoneʻe ʻia (ʻo ia hoʻi ma mua o ka hiki ʻana o ka hidden.bs.collapsehanana).

`.collapse('dispose')`

Hoʻopau i ka hāʻule ʻana o kahi mea.

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
hōʻike.bs.collapse	Hoʻomaka koke kēia hanana i ke `show`kāhea ʻia ʻana o ke ʻano hana.
hōʻike ʻia.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 `hide`kāhea ʻia ke ʻano.
huna.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).

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