Muutke oma projekti sisu nähtavust mõne klassi ja meie JavaScripti pistikprogrammidega.
Kuidas see töötab
Sisu kuvamiseks ja peitmiseks kasutatakse JavaScripti ahendamise pistikprogrammi. Nuppe või ankruid kasutatakse päästikutena, mis on vastendatud konkreetsete elementidega, mida lülitate. Elemendi ahendamine animeerib heightselle praegusest väärtusest väärtusele 0. Arvestades, kuidas CSS animatsioone käsitleb, ei saa te paddingelemendil .collapsekasutada. Selle asemel kasutage klassi iseseisva mähiselemendina.
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.
Mitu sihtmärki
A <button>või <a>saab näidata ja peita mitut elementi, viidates neile oma hrefvõi data-targetatribuudis JQuery valijaga. Mitu elementi <button>või <a>saab kuvada ja peita, kui igaüks viitab sellele oma hrefvõi data-targetatribuudiga
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.
Akordioni näide
Kaardikomponenti kasutades saate akordioni loomiseks laiendada ahendamise vaikekäitumist. Akordioni stiili õigeks saavutamiseks kasutage kindlasti .accordionümbrisena.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat rula dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 hundikuu tempor, sunt aliqua pani linnu peale kalmaar ühe päritoluga kohv nulla eeldanda shoreditch et. Nihil anim keffiyeh helvetica, käsitööõlu labore wes anderson cred nesciunt sapiente ea proident. Ad vegan, välja arvatud lihunik vice lomo. Retuusid occaecat käsitööõlu talust lauale, toores teksariidest esteetiline sünteetiline nesciunt te pole ilmselt kuulnud neist accusamus labore jätkusuutlik 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.
Juurdepääsetavus
Lisage kindlasti aria-expandedjuhtelement. See atribuut annab selgesõnaliselt edasi ekraanilugejatele ja sarnastele abitehnoloogiatele juhtelemendiga seotud kokkupandava elemendi hetkeoleku. Kui ahendav element on vaikimisi suletud, peaks juhtelemendi atribuudi väärtus olema aria-expanded="false". Kui olete määranud showklassi kasutades kokkupandava elemendi vaikimisi avatuks, määrake aria-expanded="true"selle asemel juhtelement. Pistikprogramm lülitab selle atribuudi juhtelemendil automaatselt ümber, olenevalt sellest, kas ahendatav element on avatud või suletud (JavaScripti kaudu või seetõttu, et kasutaja käivitas teise juhtelemendi, mis on samuti seotud sama ahendatava elemendiga). Kui juhtelemendi HTML-element ei ole nupp (nt <a>või <div>), siis atribuutrole="button"tuleks elemendile lisada.
Kui teie juhtelement sihib ühte ahendatavat elementi – st data-targetatribuut osutab idvalijale –, peaksite lisama aria-controlsatribuudi juhtelemendile, mis sisaldab idahendatavat elementi. Kaasaegsed ekraanilugejad ja sarnased abitehnoloogiad kasutavad seda atribuuti, et pakkuda kasutajatele täiendavaid otseteid, et navigeerida otse kokkupandava elemendi juurde.
Pange tähele, et Bootstrapi praegune rakendus ei hõlma erinevaid klaviatuuri interaktsioone, mida on kirjeldatud WAI-ARIA Authoring Practices 1.1 akordionimustris – peate need ise kohandatud JavaScriptiga kaasama.
Kasutamine
Ahendamise pistikprogramm kasutab raskuste tõstmiseks mõnda klassi:
.collapsepeidab sisu
.collapse.shownäitab sisu
.collapsinglisatakse ülemineku alguses ja eemaldatakse, kui see lõpeb
Need klassid on leitavad _transitions.scss.
Andmeatribuutide kaudu
Lihtsalt lisage elemendile data-toggle="collapse"ja a data-target, et määrata automaatselt juhtimine ühe või mitme kokkupandava elemendi üle. Atribuut data-targetaktsepteerib ahendamise rakendamiseks CSS-i valijat. Kindlasti lisage klass collapsekokkupandavale elemendile. Kui soovite, et see oleks vaikimisi avatud, lisage täiendav klass show.
Akordionilaadse rühmahalduse lisamiseks kokkupandavale alale lisage andmeatribuut data-parent="#selector". Selle tegevuse nägemiseks vaadake demo.
JavaScripti kaudu
Luba käsitsi:
Valikud
Valikud saab edastada andmeatribuutide või JavaScripti kaudu. Andmeatribuutide jaoks lisage valiku nimi data-, nagu data-parent="".
Nimi
Tüüp
Vaikimisi
Kirjeldus
lapsevanem
valija | jQuery objekt | DOM element
vale
Kui on ette nähtud ülem, suletakse selle ahendatava üksuse kuvamisel kõik määratud vanema all olevad kokkupandavad elemendid. (sarnane traditsioonilise akordioni käitumisega – see oleneb cardklassist). Atribuut tuleb määrata kokkupandaval sihtpiirkonnal.
lüliti
tõeväärtus
tõsi
Lülitab kutsumisel kokkupandava elemendi sisse
meetodid
Asünkroonsed meetodid ja üleminekud
Kõik API meetodid on asünkroonsed ja alustavad üleminekut . Nad naasevad helistaja juurde kohe pärast ülemineku algust, kuid enne selle lõppu . Lisaks ignoreeritakse üleminekukomponendi meetodikutset .
Aktiveerib teie sisu kokkupandava elemendina. Aktsepteerib valikulisi valikuid object.
.collapse('toggle')
Lülitab kokkupandava elemendi kuvatud või peidetud olekuks. Naaseb helistaja juurde enne, kui kokkupandav element on tegelikult näidatud või peidetud (st enne sündmuse shown.bs.collapsevõi hidden.bs.collapsetoimumist).
.collapse('show')
Näitab kokkupandavat elementi. Naaseb helistaja juurde enne, kui kokkupandavat elementi on tegelikult näidatud (st enne shown.bs.collapsesündmuse toimumist).
.collapse('hide')
Peidab kokkupandava elemendi. Naaseb helistaja juurde enne, kui kokkupandav element on tegelikult peidetud (st enne hidden.bs.collapsesündmuse toimumist).
.collapse('dispose')
Hävitab elemendi kokkuvarisemise.
Sündmused
Bootstrapi ahendamisklass paljastab mõned sündmused, mis on seotud ahendamise funktsiooniga.
Sündmuse tüüp
Kirjeldus
show.bs.collapse
See sündmus käivitub kohe, kui showeksemplari meetod kutsutakse.
näidatud.bs.kokkuvarisemine
See sündmus käivitatakse, kui ahendamise element on kasutajale nähtavaks tehtud (ootab, kuni CSS-i üleminekud on lõpule viidud).
peida.bs.kokkuvarisemine
See sündmus käivitatakse kohe, kui hidemeetod on välja kutsutud.
peidetud.bs.kokkuvarisemine
See sündmus käivitatakse, kui ahendamise element on kasutaja eest peidetud (ootab, kuni CSS-i üleminekud on lõpule viidud).