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.
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 i kahi mea e hoʻāla heightai i ka waiwai 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.
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.
<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>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
<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>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.
<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>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 hiki ke hoʻoheheʻe ʻia (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 collapsbile like). 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-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ʻ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 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 ʻana, a wehe ʻia i ka wā e pau ai
Hiki ke loaʻa kēia mau papa ma _transitions.scss.
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.
E ho'ā me ka lima me:
$('.collapse').collapse()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 hoʻoheheʻe ʻia 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. |
| hoʻololi | boolean | ʻoiaʻiʻo | Hoʻololi i ka mea hiki ke collapsible ma ke kāhea ʻana |
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 .
Ho'ā i kāu ʻike ma ke ʻano he mea hiki ke collapsible. ʻAe i kahi koho koho object.
$('#myCollapsible').collapse({
toggle: false
})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
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).
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 (ʻo ia hoʻi ma mua o ka hiki ʻana o ka hidden.bs.collapsehanana).
Hoʻopau i ka hāʻule ʻana o kahi mea.
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 showkā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 hidekā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…
})