Bi çend dersan û pêvekên me yên JavaScript-ê dîtina naverokê li seranserê projeya xwe biguhezînin.
Çawa dixebite
Pêveka têkçûyî ya JavaScript-ê ji bo nîşankirin û veşartina naverokê tê bikar anîn. Bişkok an lenger wekî tetikan têne bikar anîn ku ji hêmanên taybetî yên ku hûn diguhezînin têne nexşe kirin. Hilweşîna hêmanek dê heightji nirxa wê ya heyî berbi 0. Ji ber ku CSS çawa anîmasyonan digire, hûn nekarin paddingli ser .collapsehêmanek bikar bînin. Di şûna wê de, polê wekî hêmanek pêça serbixwe bikar bînin.
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.
Gelek armancên
A <button>an <a>dikare gelek hêmanan nîşan bide û veşêre bi referanskirina wan bi hilbijêrek JQuery di nav xwe hrefan data-targettaybetmendiya xwe de. Gelek <button>an jî <a>dikarin hêmanekê nîşan bidin û veşêrin heke ew her yek bi taybetmendiya hrefxwe jê re referans bikindata-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.
Mînaka Accordion
Bi karanîna pêkhateya qertê , hûn dikarin tevgera hilweşîna xwerû dirêj bikin da ku akordeyonek biafirînin. Ji bo ku hûn bi rêkûpêk şêwaza accordionê bi dest bixin, pê ewle bin ku hûn .accordionwekî pêçek bikar bînin.
Anim paratur klîşeya reprehenderit, enim eiusmod jiyana bilind accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Kamyona xwarinê quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua teyrek danî ser wê squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan exclusiveeur butcher cîgirê lomo. Leggings occaecat craft beer farm-to-sef, denim raw estetîk synth nesciunt we belkî li ser wan nebihîstiye accusamus labore domdar 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.
Gihîştina
Bawer bikin aria-expandedku li hêmana kontrolê zêde bikin. Ev taybetmendî bi eşkere rewşa heyî ya hêmana hilweşandî ya ku bi kontrola xwendevanên ekranê û teknolojiyên arîkar ên mîna wan ve girêdayî ye radigihîne. Ger hêmana hilavêtinê ji hêla xwerû ve girtî be, divê taybetmendiya li ser hêmana kontrolê xwedî nirxek be aria-expanded="false". Ger we hêmana hilavêtinê destnîşan kiriye ku ji hêla xwerû ve bi karanîna showpolê vekirî be, aria-expanded="true"li şûna wê li ser kontrolê bicîh bikin. Pêvek dê bixweber vê taybetmendiyê li ser kontrolê biguherîne li ser bingeha ku hêmana hilweşandî hatiye vekirin an girtî ye (bi JavaScript, an ji ber ku bikarhêner hêmanek kontrolê ya din jî bi heman hêmana hilweşandî ve girêdayî ye vekiriye). Ger hêmana HTML ya hêmana kontrolê ne bişkokek be (mînak, an <a>an <div>), taybetmendîrole="button"divê li hêmanê were zêdekirin.
Ger hêmana weya kontrolê hêmanek yekane ya hilaweşker hedef digire - ango data-targettaybetmendî îşaret bi idhilbijêrek dike - divê hûn aria-controlstaybetmendiyê li hêmana kontrolê zêde bikin, ku idhêmana hilavêtinê tê de ye. Xwendevanên ekrana nûjen û teknolojiyên arîkar ên bi vî rengî vê taybetmendiyê bikar tînin da ku ji bikarhêneran kurtebirên zêde peyda bikin da ku rasterast li hêmana hilweşandî bixwe bigerin.
Bala xwe bidinê ku bicîhkirina Bootstrap-ê ya heyî têkiliyên cihêreng ên klavyeyê yên ku di şêwaza akordeyonê ya WAI-ARIA Practices Authoring 1.1 de hatine destnîşankirin nagire - hûn ê hewce bikin ku van bi xwe bi JavaScript-a xwerû re têxin nav xwe.
Bikaranîna
Pêveka hilweşînê ji bo hilgirtina giran çend dersan bikar tîne:
.collapsenaverokê vedişêre
.collapse.shownaverokê nîşan dide
.collapsingdema ku veguheztin dest pê dike tê zêdekirin, û dema ku ew qediya tê jêbirin
Van dersan dikarin li _transitions.scss.
Bi taybetmendiyên daneyê
Tenê data-toggle="collapse"û a data-targetli hêmanê zêde bikin da ku bixweber kontrola yek an jî çend hêmanên hilweşandî destnîşan bikin. Taybetmendî data-targethilbijêrek CSS-ê qebûl dike ku hilweşînê li ser bicîh bike. Bawer bikin ku polê collapseli hêmana hilweşandî zêde bikin. Heke hûn dixwazin ku ew bi xweber vebe, çîna pêvek zêde bikin show.
Ji bo ku rêveberiya komê ya mîna akordeyonê li deverek hilweşandî zêde bikin, taybetmendiya daneyê zêde bikin data-parent="#selector". Ji bo dîtina vê di çalakiyê de, serî li demo bidin.
Bi JavaScript
Bi destan çalak bike bi:
Vebijêrk
Vebijark dikarin bi taybetmendiyên daneyan an JavaScriptê ve werin derbas kirin. Ji bo taybetmendiyên daneyê, navê vebijarkê lê zêde bikin data-, wekî di data-parent="".
Nav
Awa
Destçûnî
Terîf
dê û bav
hilbijêr | jQuery object | hêmana DOM
şaş
Ger dêûbav were peyda kirin, wê hingê dê hemî hêmanên hilweşandî yên di binê dêûbavê diyarkirî de werin girtin dema ku ev tişta hilvekirî were xuyang kirin. (wek behreya akordionê ya kevneşopî - ev bi polê ve girêdayî cardye). Pêdivî ye ku taybetmendî li ser devera hilweşandî ya armanc were danîn.
toggle
boolean
rast
Hêmana hilavêtinê ya li ser bangkirinê vedike
Methods
Rêbaz û veguherînên Asynchronous
Hemî rêbazên API-ê asynkron in û veguherînek dest pê dikin . Gava ku veguhêz dest pê kir lê berî ku biqede ew vedigerin bangkerê . Wekî din, bangek rêbazek li ser pêkhateyek veguhêz dê were paşguh kirin.
Naveroka we wekî hêmanek hilweşandî çalak dike. Vebijarkek vebijarkî qebûl objectdike.
.collapse('toggle')
Hêmanek dagirtî ji bo xuyangkirin an veşartinê vedigire. Berî ku hêmana hilavêtinê bi rastî were xuyang kirin an veşartin (ango berî ku bûyer shown.bs.collapsean hidden.bs.collapsebûyer çêbibe) vedigere bangkerê.
.collapse('show')
Elementeke davekirî nîşan dide. Berî ku hêmana hilavêtinê bi rastî were xuyang kirin (ango berî ku shown.bs.collapsebûyer çêbibe) vedigere bangkerê.
.collapse('hide')
Hêmanek hilweşandî vedişêre. Berî ku hêmana hilavêtinê bi rastî were veşartin (ango berî ku hidden.bs.collapsebûyer çêbibe) vedigere bangkerê.
.collapse('dispose')
Hilweşîna hêmanekê hilweşîne.
Events
Dersa hilweşînê ya Bootstrap çend bûyeran ji bo girêdana fonksiyona hilweşînê eşkere dike.
Cureyê bûyerê
Terîf
nîşan bide.bs.hilweşîn
showDema ku rêbaza nimûneyê tê gazî kirin ev bûyer tavilê dişewite.
nîşan dan.bs.hilweşîn
Dema ku hêmanek hilweşandî ji bikarhênerê re xuya bibe ev bûyer tê şewitandin (dê li bendê bimîne ku veguheztinên CSS temam bibin).
veşartin.bs.hilweşîn
hideDema ku rêbaz hate gazî kirin ev bûyer yekser tê şewitandin .
veşartî.bs.hilweşîn
Ev bûyer dema ku hêmanek hilweşandî ji bikarhêner ve hatî veşartin tê şewitandin (dê li bendê bimîne ku veguheztinên CSS biqede).