Takahurihia te whakakitenga o te ihirangi puta noa i to kaupapa me etahi karaehe me a maatau taputapu JavaScript.
Me pehea te mahi
Ka whakamahia te mono JavaScript tiango hei whakaatu me te huna i nga ihirangi. Ka whakamahia nga patene, punga ranei hei keu ka mapi ki nga huānga motuhake ka takahurihia e koe. Ma te tiango i tetahi huānga ka whakakorikori heighti te uara o naianei ki 0. Me pehea te whakahaere a CSS i nga pakiwaituhi, kaore e taea e koe te whakamahi paddingi runga i tetahi .collapsehuānga. Engari, whakamahia te akomanga hei huānga takai motuhake.
Tauira
Patohia nga paatene i raro nei hei whakaatu me te huna i tetahi atu huānga ma nga huringa akomanga:
.collapsehuna ihirangi
.collapsingka whakamahia i nga wa whakawhiti
.collapse.showwhakaatu ihirangi
Ka taea e koe te whakamahi i te hono me te hrefhuanga, te paatene ranei me te data-targethuanga. I roto i nga take e rua, data-toggle="collapse"e hiahiatia ana.
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.
Nga whaainga maha
Ka taea e te <button>ranei <a>te whakaatu me te huna i nga huānga maha ma te tohutoro me te kaiwhiri JQuery i roto i tona hrefhuanga data-target. He maha , ka taea <button>ranei <a>te whakaatu me te huna i tetahi huānga mena ka tohua e ia me o hrefraatau data-targethuanga
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.
Tauira akoriona
Ma te whakamahi i te waahanga kaari , ka taea e koe te toro atu i te whanonga tiango taunoa hei hanga i te akoriona.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad wheke. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Taraka kai quinoa nesciunt laborum eiusmod. Parakuihi 3 wolf moon tempor, sunt aliqua hoatu he manu ki runga wheke kotahi-taketake kawhe nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Te reweti occaecat mahi pia paamu-ki-tepu, raw denim aesthetic synth nesciunt kaore pea koe i rongo mo ratou accusamus labore ukauka 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.
Te urunga
Me tino taapiri atu aria-expandedki te huānga mana. Ko tenei huanga e whakaatu marama ana i te ahuatanga o naianei o te huānga tiango e herea ana ki te mana ki nga kaipanui mata me nga hangarau awhina rite. Ki te katia te huānga tiango ma te taunoa, me whai uara o te huanga o te huānga mana aria-expanded="false". Mena kua tautuhia e koe te huānga tiango kia tuwhera taunoa ma te whakamahi i te showkaraehe, tohua aria-expanded="true"ki te mana. Ko te mono ka huri aunoa i tenei huanga i runga i te mana i runga i te mea kua whakatuwherahia, kua kati ranei te huānga tiango (ma te JavaScript, na te mea i whakaoho te kaiwhakamahi i tetahi atu huānga mana e herea ana ki taua huānga tiango). Mena ehara te huānga HTML o te mana whakahaere i te paatene (hei tauira, he, he <a>ranei <div>), te huangarole="button"me taapiri atu ki te huānga.
Mēnā e aro ana tō huānga mana ki tētahi huānga tiango kotahi – arā data-target, e tohu ana te huanga ki tētahi idkaikōwhiri – me tāpiri koe i te aria-controlshuanga ki te huānga mana, kei roto te ido te huānga tiango. Ka whakamahia e nga kaipanui mata hou me nga hangarau awhina rite tenei huanga ki te whakarato ki nga kaiwhakamahi etahi atu pokatata ki te whakatere tika ki te huānga tiango ake.
Kia mahara ko te whakatinanatanga o naianei a Bootstrap kaore e kapi i nga momo taunekeneke papapātuhi e whakaahuatia ana i roto i te tauira akoriona Wai-ARIA Authoring Practices 1.1 - me whakauru e koe enei ki te JavaScript ritenga.
Whakamahinga
Ka whakamahia e te mono tiango etahi karaehe hei hapai i te hiki taumaha:
.collapseka huna i te ihirangi
.collapse.showwhakaatu te ihirangi
.collapsingka taapirihia ina timata te whakawhiti, ka tangohia ina mutu
Ka kitea enei akomanga i roto i _transitions.scss.
Ma nga huanga raraunga
Taapiri noa data-toggle="collapse"me te data-targeta ki te huānga hei tautapa aunoa i te mana o tetahi, neke atu ranei nga huānga tiango. Ka data-targetwhakaaetia e te huanga he kaikowhiri CSS hei hoatu i te tiango ki. Me tino taapiri te karaehe collapseki te huānga tiango. Mena kei te pirangi koe kia tuwhera taunoa, taapirihia te akomanga taapiri show.
Hei taapiri i te whakahaere roopu rite-akordion ki tetahi waahi tiango, taapirihia te huanga raraunga data-parent="#selector". Tirohia te demo kia kite i tenei mahi.
Ma te JavaScript
Whakahohe ā-ringa ki:
Kōwhiringa
Ko nga whiringa ka taea te tuku ma nga huanga raraunga, JavaScript ranei. Mo nga huanga raraunga, apitihia te ingoa whiringa ki data-, penei i te data-parent="".
Ingoa
Momo
Taunoa
Whakaahuatanga
matua
kaiwhiriwhiri | ahanoa jQuery | huānga DOM
teka
Mena ka tukuna he matua, ka katia nga huānga tiango katoa i raro i te matua kua tohua ina whakaatuhia mai tenei mea tiango. (he rite ki te whanonga accordion tuku iho - ka whakawhirinaki tenei ki te cardkaraehe). Me whakanoho te huanga ki runga i te waahi ka taea te tiango.
takahuri
boolean
pono
Ka takahuri i te huānga tiango i runga i te inoi
Nga tikanga
Nga tikanga tukutahi me nga whakawhitinga
Ko nga tikanga API katoa he tukutahi ka timata te whakawhiti . Ka hoki mai ano ki te kaikaranga ina timata te whakawhiti engari i mua i te mutunga . I tua atu, ka warewarehia te karanga tikanga mo tetahi waahanga whakawhiti .
Ka whakahohe i to ihirangi hei huānga tiango. Ka whakaae ki nga whiringa whiriwhiri object.
.collapse('toggle')
Ka takahuri i tetahi huānga tiango hei whakaatu, huna ranei. Ka hoki ki te kaiwaea i mua i te whakaaturanga, huna ranei o te huānga tiango (arā, i mua i te puta o shown.bs.collapsete hidden.bs.collapsetakahanga).
.collapse('show')
He whakaatu huānga tiango. Ka hoki ki te kaiwaea i mua i te whakaaturanga o te huānga tiango (arā i mua i te shown.bs.collapseputa o te takahanga).
.collapse('hide')
Hunaia he huānga tiango. Ka hoki ki te kaiwaea i mua i te hunanga o te huānga tiango (arā i mua i te hidden.bs.collapseputa o te takahanga).
.collapse('dispose')
Ka whakangaro i te tiango o te huānga.
Nga huihuinga
Ko te karaehe tiango a Bootstrap e whakaatu ana i etahi huihuinga mo te hono ki te mahi tiango.
Momo Takahanga
Whakaahuatanga
show.bs.collapse
Ka pupuhi tenei takahanga ina ka showkarangahia te aratuka tauira.
whakaaturia.bs.collapse
Ka puhia tenei takahanga ina kitea he huānga tiango ki te kaiwhakamahi (ka tatari kia oti nga whakawhitinga CSS).
huna.bs.collapse
Ka pupuhihia tenei kaupapa i te wa hidei kiia ai te tikanga.
huna.bs.collapse
Ka puhia tenei takahanga ina hunahia he huānga tiango mai i te kaiwhakamahi (ka tatari kia oti nga whakawhitinga CSS).