I-toggle ti pannakakita ti linaon iti ballasiw ti proyektom babaen ti sumagmamano a klase ken dagiti pluginmi ti JavaScript.
No kasano ti panagandar dayta
Ti collapse a plugin ti JavaScript ket maus-usar a mangipakita ken mangilemmeng ti linaon. Dagiti buton wenno angkla ket mausar a kas dagiti trigger a namapa kadagiti espesipiko nga elemento nga i-toggle-mo. Ti panangi-collap ti maysa nga elemento ket mang-animate ti heightmanipud iti agdama a pategna aginggana iti 0. No maited no kasano a ti CSS ket mangasikaso kadagiti animasion, saanmo a mabalin nga usaren paddingiti maysa .collapsenga elemento. Imbes ketdi, usaren ti klase a kas maysa nga agwaywayas nga elemento ti panagbalkot.
Pagwadan
I-klik dagiti buton iti baba tapno maipakita ken ilemmeng ti sabali nga elemento babaen dagiti panagbalbaliw ti klase:
Mabalinmo nga usaren ti silpo nga addaan iti hrefattribute, wenno ti buton nga addaan iti data-targetattribute. Iti agpada a kaso, ti data-toggle="collapse"ket kasapulan.
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.
Adu a puntiria
A <button>wenno <a>mabalinna nga ipakita ken ilemmeng dagiti adu nga elemento babaen ti panangireperensiana kadagitoy babaen ti JQuery selector iti hrefwenno data-targetattribute-na. Multiple <button>wenno <a>mabalin nga ipakita ken ilemmeng ti maysa nga elemento no tunggal maysa ket reperensiada daytoy babaen ti hrefor data-targetattribute -da
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.
Pagarigan ti akordeon
Babaen ti panangusar iti paset ti kard , mabalinmo a palawaen ti default a kababalin ti panagreggaay tapno makaaramidka iti akordeon.
Anim pariatur cliche reprehenderit, enim eiusmod nangato a biag accusamus terry richardson ad pusit. 3 lobo bulan officia aute, saan nga cupidatat nga skateboard dolor brunch. Trak ti taraon quinoa nesciunt laborum eiusmod. Brunch 3 lobo bulan tempor, sunt aliqua ikabil ti tumatayab iti dayta pusit maymaysa ti nagtaudanna a kape nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft serbesa a panagtrabaho wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur nga kartero bise lomo. Leggings occaecat craft beer talon-agingga-iti-lamisaan, hilaw a denim aesthetic synth nesciunt nalabit saanmo a nangngeg kadakuada 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.
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.
Ti pannakagun-od
Siguraduen nga inayon aria-expandedti elemento ti panangkontrol. Daytoy a kababalin ket nalawag a mangipakaammo ti agdama a kasasaad ti maibukbok nga elemento a naisilpo iti kontrol kadagiti agbasbasa ti iskrin ken dagiti kapada a makatulong a teknolohia. No ti maibukbok nga elemento ket naserraan babaen ti kasisigud, ti attribute iti elemento ti panagtengngel ket rumbeng nga addaan iti pateg ti aria-expanded="false". No inkeddengmo ti maibukbok nga elemento a malukatan babaen ti default babaen ti panagusar ti showklase, ikeddengmo aria-expanded="true"ketdi ti kontrol. Ti plugin ket automatiko a mangbalbaliw iti daytoy a kababalin iti kontrol a naibatay no ti maibukbok nga elemento ket naluktan wenno naserraan wenno saan (babaen ti JavaScript, wenno gapu ta ti agar-aramat ket nangtignay ti sabali nga elemento ti panagtengngel a naisilpo met iti isu met laeng nga elemento ti collapsbile). No ti elemento ti HTML ti elemento ti panangtengngel ket saan a buton (kas pagarigan, maysa <a>wenno <div>), ti attributerole="button"rumbeng a mainayon iti elemento.
No ti elemento ti panagtengngelmo ket mangpuntiria ti maymaysa a maibukbok nga elemento – kayatna a sawen ti data-targetattribute ket mangiturturong iti maysa a idmangpili – rumbeng nga inayonmo ti aria-controlsattribute iti elemento ti kontrol, a naglaon ti idti maibukbok nga elemento. Dagiti moderno a managbasa ti iskrin ken dagiti kapada a makatulong a teknolohia ket agus-usar iti daytoy a kababalin tapno mangipaay kadagiti agar-aramat kadagiti kanayonan a ab-ababa a dalan tapno direkta nga ag-navigate iti maibukbok nga elemento a mismo.
Imutektekanyo a ti agdama a pannakaipatungpal ti Bootstrap ket saan a mangsaklaw kadagiti nadumaduma a panagtitinnulong ti teklado a nailadawan iti WAI-ARIA Authoring Practices 1.1 a padron ti akordeon - kasapulam nga iraman dagitoy a mismo babaen ti kostumbre a JavaScript.
Panagusar
Ti plugin ti pannakarba ket agus-usar kadagiti sumagmamano a klase tapno mangasikaso ti nadagsen a panagipangato:
.collapseilemmengna ti linaonna
.collapse.showipakitana ti linaonna
.collapsingmainayon no mangrugi ti panagbalbaliw, ken maikkat no malpas
Dagitoy a klase ket mabalin a masarakan iti _transitions.scss.
Babaen kadagiti attribute ti datos
Basta inayon data-toggle="collapse"ken a data-targetiti elemento tapno automatiko a mangituding ti kontrol ti maysa wenno ad-adu pay a mai-collapsible nga elemento. Ti data-targetattribute ket umawat ti maysa a CSS a mangpili a pangipakat ti collapse iti. Siguraduen nga inayon ti klase collapseiti collapsible nga elemento. No kayatmo a default a malukatan, inayon ti kanayonan a klase show.
Tapno manginayon ti kasla akordeon a panagituray ti grupo iti maysa a maibukbok a lugar, inayon ti kabileg ti datos data-parent="#selector". Kitaen ti demo tapno makita daytoy nga agtigtignay.
Babaen ti JavaScript
Pagbalinen a manual babaen ti:
Dagiti Pagpilian
Dagiti pagpilian ket mabalin a maipasa babaen dagiti attribute ti datos wenno JavaScript. Para kadagiti kababalin ti datos, inayon ti nagan ti pagpilian iti data-, a kas iti data-parent="".
Nagan
Tipo
Default
Panangiladawan
nagannak
agpili ti | jQuery nga banag | DOM nga elemento
saan nga agpayso
No ti nagannak ket naited, kalpasanna amin dagiti maibukbok nga elemento iti baba ti naikeddeng a nagannak ket maiserra no daytoy a maibukbok a banag ket maipakita. (kapada ti tradisional a kababalin ti akordeon - daytoy ket agpannuray iti cardklase). Ti attribute ket masapul a maikeddeng iti target a collapsible a lugar.
ag-toggle nga
boolean nga
agpayso
I-toggles ti collapsible nga elemento iti inbokasion
Dagiti Pamay-an
Dagiti asynchronous a pamay-an ken panagbalbaliw
Amin a pamay-an ti API ket asynchronous ken mangrugi ti panagbalbaliw . Agsublida iti tumawag apaman a mairugi ti panagbalbaliw ngem sakbay nga agpatingga . Iti pay maipatinayon, ti maysa nga awag ti pamay-an iti maysa a panagbalbaliw a paset ket mailaksidto .
Paaktiboenna ti linaonmo kas maysa a collapsible nga elemento. Awaten ti maysa nga opsional a pagpilian object.
.collapse('toggle')
I-toggles ti collapsible nga elemento iti maipakita wenno mailemmeng. Agsubli iti tumawag sakbay a ti maibukbok nga elemento ket aktual a naipakita wenno nailemmeng (kayatna a sawen sakbay a mapasamak ti shown.bs.collapsewenno hidden.bs.collapsepasamak).
.collapse('show')
Ipakita ti maysa a collapsible nga elemento. Agsubli iti umaw-awag sakbay a ti maibukbok nga elemento ket aktual a naipakita (kayatna a sawen sakbay a shown.bs.collapsemapasamak ti pasamak).
.collapse('hide')
Ilemmengna ti maysa a collapsible nga elemento. Agsubli iti tumawag sakbay a ti maibukbok nga elemento ket aktual a nailemmeng (kayatna a sawen sakbay a hidden.bs.collapsemapasamak ti pasamak).
.collapse('dispose')
Dadaelenna ti pannakarba ti maysa nga elemento.
Dagiti Pasamak
Ti klase ti panagreggaay ti Bootstrap ket mangibutaktak kadagiti sumagmamano a pasamak para iti panag-hook iti panagusar ti panagreggaay.
Kita ti Pasamak
Panangiladawan
ipakita.bs.ag-collapse
Daytoy a pasamak ket agputok a dagus no ti showpamay-an ti pagarigan ket maawagan.
naipakita.bs.collapse
Daytoy a pasamak ket mapaputok no ti maysa nga elemento ti panagreggaay ket naaramid a makita ti agar-aramat (urayenna dagiti panagbalbaliw ti CSS a malpas).
ilemmeng.bs.ag-collapse
Daytoy a pasamak ket dagus a mapaputok no ti hidepamay-an ket naawagan.
nailemmeng.bs.ag-collapse
Daytoy a pasamak ket mapaputok no ti maysa nga elemento ti panagreggaay ket nailemmeng manipud iti agar-aramat (urayenna dagiti panagbalbaliw ti CSS a malpas).