Geuza mwonekano wa maudhui katika mradi wako wote na madarasa machache na programu-jalizi zetu za JavaScript.
Inavyofanya kazi
Kunja JavaScript programu-jalizi hutumika kuonyesha na kuficha maudhui. Vifungo au nanga hutumiwa kama vichochezi ambavyo vimepangwa kwa vipengele maalum unavyogeuza. Kukunja kipengele kutahuisha heightkutoka kwa thamani yake ya sasa hadi 0. Kwa kuzingatia jinsi CSS inavyoshughulikia uhuishaji, huwezi kutumia paddingkwenye .collapsekipengee. Badala yake, tumia darasa kama nyenzo huru ya kufunga.
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.
Malengo mengi
A <button>au <a>inaweza kuonyesha na kuficha vipengee vingi kwa kuvirejelea na kiteuzi cha JQuery katika kipengele chake hrefau data-targetsifa. Nyingi <button>au <a>zinaweza kuonyesha na kuficha kipengele ikiwa kila kimoja kinarejelea na wao hrefau data-targetsifa
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.
Mfano wa accordion
Kwa kutumia kijenzi cha kadi , unaweza kupanua tabia chaguomsingi ya kukunja ili kuunda accordion. Ili kufikia vizuri mtindo wa accordion, hakikisha kutumia .accordionkama kitambaa.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad ngisi. 3 mbwa mwitu mwezi officia aute, non cupidatat skateboard dolor brunch. Lori la chakula quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua weka ndege juu yake ngisi mwenye asili ya kahawa nulla guessnda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur mchinjaji makamu wa lomo. Leggings occaecat craft bia farm-to-table, denim ghafi aesthetic synth nesciunt pengine hujasikia kuwahusu accusamus labour endelevu 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.
Ufikivu
Hakikisha kuongeza aria-expandedkwenye kipengele cha kudhibiti. Sifa hii inaonyesha kwa uwazi hali ya sasa ya kipengele kinachoweza kukunjwa kilichounganishwa na udhibiti kwa visoma skrini na teknolojia saidizi sawa. Ikiwa kipengele kinachoweza kukunjwa kimefungwa kwa chaguo-msingi, sifa kwenye kipengele cha kudhibiti inapaswa kuwa na thamani ya aria-expanded="false". Ikiwa umeweka kipengee kinachoweza kukunjwa kufunguka kwa chaguomsingi kwa kutumia showdarasa, aria-expanded="true"badala yake weka kidhibiti. Programu-jalizi itageuza kiotomatiki sifa hii kwenye kidhibiti kulingana na ikiwa kipengele kinachoweza kukunjwa kimefunguliwa au chafungwa (kupitia JavaScript, au kwa sababu mtumiaji alianzisha kipengele kingine cha udhibiti ambacho kimeunganishwa na kipengele sawa cha collapsbile). Ikiwa kipengele cha HTML cha kipengele cha kudhibiti si kitufe (kwa mfano, a <a>au <div>), sifarole="button"inapaswa kuongezwa kwa kipengele.
Ikiwa kipengele chako cha kudhibiti kinalenga kipengele kimoja kinachoweza kukunjwa - yaani data-targetsifa inaelekeza kwenye idkiteuzi - unapaswa kuongeza aria-controlssifa kwenye kipengele cha kudhibiti, kilicho na idkipengele kinachoweza kukunjwa. Visomaji skrini vya kisasa na teknolojia saidizi kama hizo hutumia sifa hii kuwapa watumiaji njia za mkato za ziada za kusogeza moja kwa moja hadi kwenye kipengele chenyewe kinachoweza kukunjwa.
Kumbuka kuwa utekelezaji wa sasa wa Bootstrap haujumuishi mwingiliano mbalimbali wa kibodi uliofafanuliwa katika muundo wa mfuatano wa WAI-ARIA wa Mazoezi ya Utunzi 1.1 - utahitaji kujumuisha haya wewe mwenyewe na JavaScript maalum.
Matumizi
Programu-jalizi ya kukunja hutumia madarasa machache kushughulikia unyanyuaji mzito:
.collapsehuficha yaliyomo
.collapse.showinaonyesha yaliyomo
.collapsinghuongezwa wakati mpito unapoanza, na kuondolewa ukikamilika
Madarasa haya yanaweza kupatikana katika _transitions.scss.
Kupitia sifa za data
Ongeza tu data-toggle="collapse"na a data-targetkwa kipengele ili kukabidhi kiotomatiki udhibiti wa kipengele kimoja au zaidi zinazoweza kukunjwa. Sifa data-targetinakubali kiteuzi cha CSS cha kutumia kukunja kwake. Hakikisha umeongeza darasa collapsekwenye kipengele kinachoweza kukunjwa. Ikiwa ungependa ifungue chaguomsingi, ongeza darasa la ziada show.
Ili kuongeza usimamizi wa kikundi kama accordion kwenye eneo linalokunjwa, ongeza sifa ya data data-parent="#selector". Rejelea onyesho ili kuona hili likiendelea.
Kupitia JavaScript
Washa wewe mwenyewe na:
Chaguo
Chaguzi zinaweza kupitishwa kupitia sifa za data au JavaScript. Kwa sifa za data, ongeza jina la chaguo kwa data-, kama katika data-parent="".
Jina
Aina
Chaguomsingi
Maelezo
mzazi
kiteuzi | kitu cha jQuery | Kipengele cha DOM
uongo
Ikiwa mzazi ametolewa, basi vipengele vyote vinavyoweza kukunjwa chini ya mzazi aliyebainishwa vitafungwa wakati kipengee hiki kinachoweza kukunjwa kitaonyeshwa. (sawa na tabia ya jadi ya accordion - hii inategemea carddarasa). Sifa lazima iwekwe kwenye eneo linalokunjwa lengwa.
kugeuza
boolean
kweli
Hugeuza kipengele kinachoweza kukunjwa kwenye ombi
Mbinu
Njia za Asynchronous na mabadiliko
Njia zote za API ni za asynchronous na zinaanzisha mpito . Wanarudi kwa mpigaji mara tu mpito unapoanza lakini kabla haujaisha . Kwa kuongeza, simu ya mbinu kwenye sehemu ya mpito itapuuzwa .
Huwasha maudhui yako kama kipengele kinachoweza kukunjwa. Inakubali chaguo za hiari object.
.collapse('toggle')
Hugeuza kipengele kinachoweza kukunjwa kuonyeshwa au kufichwa. Hurejesha kwa anayepiga kabla kipengele kinachoweza kukunjwa hakijaonyeshwa au kufichwa (yaani kabla ya tukio shown.bs.collapseau hidden.bs.collapsetukio).
.collapse('show')
Inaonyesha kipengele kinachoweza kukunjwa. Hurejesha kwa mpigaji simu kabla kipengele kinachoweza kukunjwa hakijaonyeshwa (yaani kabla ya shown.bs.collapsetukio kutokea).
.collapse('hide')
Huficha kipengele kinachoweza kukunjwa. Hurejesha kwa anayepiga kabla kipengele kinachoweza kukunjwa hakijafichwa (yaani kabla ya hidden.bs.collapsetukio kutokea).
.collapse('dispose')
Huharibu mkunjo wa kipengele.
Matukio
Darasa la kukunja la Bootstrap linafichua matukio machache ya kunasa katika utendakazi wa kukunja.
Aina ya Tukio
Maelezo
onyesha.bs.kukunja
Tukio hili huwaka mara moja wakati shownjia ya mfano inaitwa.
imeonyeshwa.bs.kukunja
Tukio hili huwashwa wakati kipengele cha kukunja kimefanywa kuonekana kwa mtumiaji (itasubiri mabadiliko ya CSS yakamilike).
ficha.bs.kunja
Tukio hili linafukuzwa mara moja wakati hidenjia imeitwa.
kufichwa.bs.kukunja
Tukio hili huwashwa wakati kipengele cha kukunja kimefichwa kutoka kwa mtumiaji (itasubiri mabadiliko ya CSS yakamilike).