Taslamanyňyzyň mazmunyny birnäçe synp we JavaScript plaginlerimiz bilen üýtgediň.
Bu nähili işleýär
Apseykylan JavaScript plugin mazmuny görkezmek we gizlemek üçin ulanylýar. Düwmeler ýa-da labyrlar, üýtgeýän aýratyn elementlere düzülen triggerler hökmünde ulanylýar. heightBir elementiň çökmegi, häzirki bahasyndan janlandyrar 0. CSS-iň animasiýalary nähili alyp barýandygyny göz öňünde tutup padding, bir .collapseelementde ulanyp bilmersiňiz. Munuň ýerine synpy garaşsyz örtük elementi hökmünde ulanyň.
Mysal
Synp üýtgeşmeleri arkaly başga bir elementi görkezmek we gizlemek üçin aşakdaky düwmelere basyň:
.collapsemazmuny gizleýär
.collapsinggeçiş döwründe ulanylýar
.collapse.showmazmunyny görkezýär
Sypat bilen hrefbaglanyşyk ýa-da atributly düwme ulanyp bilersiňiz data-target. Iki ýagdaýda-da data-toggle="collapse"talap edilýär.
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.
Birnäçe nyşan
A <button>ýa -da atributynda <a>JQuery saýlaýjysyna salgylanyp, birnäçe elementi görkezip we gizläp biler . Bir elementi hersi öz aýratynlygy ýa-da häsiýeti bilen görkezýän bolsa, köp ýa-da görkezip we gizläp bilerhrefdata-target<button><a>hrefdata-target
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.
Akkordeon mysaly
Kart komponentini ulanyp, akkordeon döretmek üçin deslapky çökmek häsiýetini uzaldyp bilersiňiz.
Anim pariatur cliche reprehenderit, enim eiusmod ýokary durmuş accusamus terry richardson ad squid. 3 möjek aýy officia aute, cupidatat däl skateboard dolor ertirlik. Azyk ýük maşyny quinoa nesciunt laborum eiusmod. Ertirlik nahary 3 möjek aý tempor, sunt aliqua bir guş kofe nulla assomenda shoreditch we ş.m. Nihil anim keffiyeh helvetica, piwo zähmeti wes anderson kredit nesciunt sapiente ea proident. Mahabat wegetarian aýratyn gassap wise-lomo. “Leggings occaecat senet” piwo fermasy-stol, çig denim estetiki synth nesciunt, belki-de, olaryň “VHS” işini dowam etdirýändigini eşitmediňiz.
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.
Elýeterlilik
aria-expandedDolandyryş elementine hökman goşuň . Bu atribut, okyjylary we şuňa meňzeş kömekçi tehnologiýalary dolandyrmak üçin dolandyryşa bagly çökýän elementiň häzirki ýagdaýyny aç-açan görkezýär. Apsykylýan element deslapky görnüşde ýapylan bolsa, dolandyryş elementindäki atributyň bahasy bolmaly aria-expanded="false". Apsykylýan elementi showsynpy ulanyp, açyk diýip kesgitlän bolsaňyz aria-expanded="true", ýerine dolandyryşda goýuň. Plagin, ýykylýan elementiň açylandygyna ýa-da ýapylmagyna (JavaScript arkaly ýa-da ulanyjynyň şol bir çökýän element bilen baglanyşykly başga bir dolandyryş elementini döredendigi sebäpli) dolandyryşda awtomatiki usulda üýtgediler. Dolandyryş elementiniň HTML elementi düwme däl bolsa (meselem, <a>ýa-da <div>), atributrole="button"elementine goşulmalydyr.
Dolandyryş elementiňiz ýekeje ýykylýan elementi nyşana alýan bolsa - ýagny data-targetatribut saýlaýjyny görkezýän bolsa - ýykylýan elementiň düzümini öz içine alýan dolandyryş elementine atribut idgoşmaly . Döwrebap ekran okaýjylary we şuňa meňzeş kömekçi tehnologiýalar, ulanyjylary ýykylýan elementiň özüne gönüden-göni geçmek üçin goşmaça gysga ýollar bilen üpjün etmek üçin bu atributdan peýdalanýarlar.aria-controlsid
“Bootstrap” -yň häzirki durmuşa geçirilmegi, WAI-ARIA Awtorlaşdyryş amallary 1.1 akkordeon görnüşinde beýan edilen dürli klawiatura täsirlerini öz içine almaýandygyny ýadyňyzdan çykarmaň - bulary adaty JavaScript bilen goşmaly bolarsyňyz.
Ulanylyşy
Apseykylýan plugin agyr götermek üçin birnäçe synp ulanýar:
.collapsemazmuny gizleýär
.collapse.showmazmunyny görkezýär
.collapsinggeçiş başlanda goşulýar we gutarandan soň aýrylýar
Bu sapaklary tapyp bilersiňiz _transitions.scss.
Maglumat atributlary arkaly
Diňe bir ýa-da birnäçe çöküp bilýän elementlere gözegçiligi awtomatiki bellemek üçin elemente data-toggle="collapse"goşuň . data-targetAýratynlyk data-target, çökmegi ulanmak üçin CSS saýlaýjysyny kabul edýär. Synpy collapseýykylýan elemente goşuň. Adaty açylmagyny isleseňiz, goşmaça synp goşuň show.
Çökýän ýere akkordeona meňzeş topar dolandyryşyny goşmak üçin maglumat atributyny goşuň data-parent="#selector". Muny hereketde görmek üçin demo serediň.
JavaScript arkaly
El bilen işlediň:
Görnüş
Opsiýalar maglumat atributlary ýa-da JavaScript arkaly geçirilip bilner. Maglumat atributlary üçin, opsiýanyň adyny data-bolşy ýaly goşuň data-parent="".
Ady
Görnüşi
Bellenen
Düşündiriş
ene-atasy
saýlaýjy | jQuery obýekti | DOM elementi
ýalan
Ene-ata üpjün edilen bolsa, bu ýykylýan element görkezilende görkezilen ene-atanyň aşagyndaky ähli çöküp bilýän elementler ýapylar. (adaty akkordeon häsiýetine meňzeýär - bu cardsynpa bagly). Aýratynlyk nyşanyň ýykylýan ýerinde kesgitlenmeli.
üýtgetmek
boolean
dogry
Apykylýan elementi çakylyk bilen üýtgedýär
Usullar
Asynkron usullar we geçişler
APIhli API usullary asynkron bolup, geçişe başlaýar . Geçiş başlan badyna, ýöne gutarmanka jaň edijä gaýdyp gelýärler . Mundan başga-da, geçiş komponentine çagyryş usuly hasaba alynmaz .
Mazmunyňyzy çökýän element hökmünde işjeňleşdirýär. Goşmaça wariantlary kabul edýär object.
.collapse('toggle')
Görkezilýän ýa-da gizlenýän elementi çalyşýar. Apsykylýan element hakykatdanam görkezilmän ýa-da gizlenmänkä (ýagny waka shown.bs.collapseýa-da hidden.bs.collapsewaka ýüze çykmazdan ozal) jaň edijä gaýdyp gelýär.
.collapse('show')
Apsykylýan elementi görkezýär. Apsykylýan element hakykatdanam görkezilmänkä (ýagny shown.bs.collapsewaka ýüze çykmazdan ozal) jaň edijä gaýdyp gelýär.
.collapse('hide')
Apsykylýan elementi gizleýär. Apsykylýan element aslynda gizlenmänkä (ýagny hidden.bs.collapsewaka ýüze çykmazdan ozal) jaň edijä gaýdyp gelýär.
.collapse('dispose')
Bir elementiň çökmegini ýok edýär.
Wakalar
“Bootstrap” -yň çökmegi synpy, çökmek funksiýasyna girmek üçin birnäçe wakany paş edýär.
Çäräniň görnüşi
Düşündiriş
show.bs.collapse
showBu waka mysal usuly çagyrylanda derrew ýanýar .
görkezildi.bs.collapse
Bu hadysa, çöküş elementi ulanyja görünen mahaly atylýar (CSS geçişleriniň tamamlanmagyna garaşýar).
hide.bs.collapse
hideBu waka usul çagyrylanda derrew atylýar .
gizlenen.bs.collapse
Bu hadysa, ulanyjydan çökmek elementi gizlenende (CSS geçişleriniň tamamlanmagyna garaşar) atylýar.