Koaleha

Fetolela ponahalo ea litaba mosebetsing oa hau ka lihlopha tse 'maloa le li-plugins tsa rona tsa JavaScript.

Kamoo e sebetsang kateng

Ho putlama JavaScript plugin e sebelisetsoa ho bontša le ho pata litaba. Likonopo kapa li-ankora li sebelisoa e le lintho tse susumetsang tse etselitsoeng likarolo tse itseng tseo u li fetolang. Ho putlama element ho tla phelisa ho heighttloha ho boleng ba hona joale ho isa ho 0. Ho latela hore na CSS e sebetsana joang le lipopae, u ke ke ua sebelisa ntho paddinge .collapseitseng. Ho e-na le hoo, sebelisa sehlopha e le ntho e ikemetseng ea ho phuthela.

Liphetho tsa animation tsa karolo ena li ipapisitse le prefers-reduced-motionpotso ea media. Sheba karolo e fokolitsoeng ea motsamao oa litokomane tsa phihlello ea rona .

Mohlala

Tobetsa likonopo tse ka tlase ho bontša le ho pata ntho e 'ngoe ka liphetoho tsa sehlopha:

.collapsee pata litaba
.collapsinge sebelisoa nakong ea liphetoho
.collapse.showe bontsha dikahare

U ka sebelisa sehokelo se nang le hreftšobotsi, kapa konopo e nang le data-targettšobotsi. Maemong ana ka bobeli, ho data-toggle="collapse"hlokahala.

Kopanya le href

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.

<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  </a>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Button with data-target
  </button>
</p>
<div class="collapse" id="collapseExample">
  <div class="card card-body">
    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.
  </div>
</div>

Lipheo tse ngata

A <button>kapa <a>e ka bonts'a le ho pata likarolo tse ngata ka ho li supa ka khetho ea JQuery ho eona hrefkapa data-targettšobotsi. E mengata <button>kapa <a>e ka bonts'a le ho pata ntho haeba e mong le e mong a e supa ka hreftšobotsi data-targetea bona

Fetolela ntho ea pele

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.

<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button>
</p>
<div class="row">
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample1">
      <div class="card card-body">
        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.
      </div>
    </div>
  </div>
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample2">
      <div class="card card-body">
        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.
      </div>
    </div>
  </div>
</div>

Mohlala oa accordion

U sebelisa karolo ea karete , u ka holisa mokhoa oa kamehla oa ho putlama ho theha accordion. Ho fihlela setaele sa accordion hantle, etsa bonnete ba hore o se sebelisa .accordionjoalo ka sekoaelo.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Lori ea lijo quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua beha nonyana holim'a eona squid single-origin coffee nulla imaginenda shoreditch et. Nihil anim keffiyeh helvetica, craft biri labour wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft craft biri-to-table, raw denim aesthetic synth nesciunt mohlomong ha u so utloe ka bona accusamus labour 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.

<div class="accordion" id="accordionExample">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h2 class="mb-0">
        <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </button>
      </h2>
    </div>

    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
      <div class="card-body">
        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.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingTwo">
      <h2 class="mb-0">
        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </button>
      </h2>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
      <div class="card-body">
        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.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingThree">
      <h2 class="mb-0">
        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </button>
      </h2>
    </div>
    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
      <div class="card-body">
        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.
      </div>
    </div>
  </div>
</div>

Ho fihlella

Etsa bonnete ba hore o eketsa aria-expandedkarolo ea taolo. Tšobotsi ena e hlahisa ka ho hlaka boemo ba hona joale ba ntho e ka putlamang e hokahaneng le taolo ho libali tsa skrini le mahlale a thusang a tšoanang. Haeba ntho e putlamang e koetsoe ka ho sa feleng, tšobotsi e karolong ea taolo e lokela ho ba le boleng ba aria-expanded="false". Haeba u setehile hore ntho e ka phuthoang e buloe ka mokhoa oa kamehla u sebelisa showsehlopha, beha aria-expanded="true"taolong. Plugin e tla fetola tšobotsi ena ka bo eona taolong e ipapisitse le hore na ntho e putlang e butsoe kapa che e koetsoe (ka JavaScript, kapa hobane mosebelisi a hlahisitse karolo e 'ngoe ea taolo le eona e hokeletsoeng nthong e tšoanang e putlang). Haeba karolo ea taolo ea HTML e se konopo (mohlala, <a>kapa <div>), tšobotsirole="button"e lokela ho eketsoa ho element.

Haeba karolo ea taolo ea hau e shebile ntho e le 'ngoe e putlang - ke hore, data-targettšobotsi e supa ho idkhetho - o lokela ho eketsa aria-controlstšobotsi ho karolo ea taolo, e nang le idntho e putlamang. Babali ba skrine ba sejoale-joale le mahlale a thusang a tšoanang a sebelisa tšobotsi ena ho fa basebelisi likhutšoane tse ling ho ea ka kotloloho ho ntho e putlang ka boyona.

Hlokomela hore ts'ebetsong ea hajoale ea Bootstrap ha e akaretse litšebelisano tse fapaneng tsa keyboard tse hlalositsoeng ho WAI-ARIA Authoring Practices 1.1 accordion pattern - o tla hloka ho li kenyelletsa le JavaScript e tloaelehileng.

Tšebeliso

Plugin ea ho putlama e sebelisa lihlopha tse 'maloa ho sebetsana le ho phahamisa boima:

.collapsee pata litaba
.collapse.showe bontsha dikahare
.collapsinge eketsoa ha phetoho e qala, mme e tlosoe ha e qeta

Lihlopha tsena li ka fumanoa ho _transitions.scss.

Ka litšobotsi tsa data

Kenya feela data-toggle="collapse"le a data-targetho element ho fana ka taolo ea ntho e le 'ngoe kapa tse ngata tse putlang. data-targetTšobotsi e amohela khetho ea CSS eo u ka sebelisang ho putlama ho eona . Etsa bonnete ba hore o kenyelletsa sehlopha collapseho ntho e putlang. Haeba u rata hore e bulehe ka mokhoa o tloaelehileng, eketsa sehlopha sa tlatsetso show.

Ho kenya taolo ea sehlopha se kang accordion sebakeng se putlahang, eketsa tšobotsi ea data data-parent="#selector". Sheba demo ho bona sena se sebetsa.

Ka JavaScript

Lumella ka letsoho ka:

$('.collapse').collapse()

Dikgetho

Likhetho li ka fetisoa ka lintlha tsa data kapa JavaScript. Bakeng sa litšobotsi tsa data, kenya lebitso la khetho ho data-, joalo ka data-parent="".

Lebitso	Mofuta	Ea kamehla	Tlhaloso
motsoadi	mokhethi \| ntho ea jQuery \| Karolo ea DOM	bohata	Haeba ho fanoe ka motsoali, likarolo tsohle tse bonohang tlas'a motsoali ea boletsoeng li tla koaloa ha ntho ena e bonohang e bontšoa. (e ts'oanang le boitšoaro ba moetlo oa accordion - sena se itšetlehile ka `card`sehlopha). Sebopeho se tlameha ho beoa sebakeng se putlahang.
toggle	boolean	'nete	E fetola ntho e ka putlamang kopong

Mekhoa

Mekhoa ea Asynchronous le liphetoho

Mekhoa eohle ea API ha e- synchronous 'me e qala phetoho . Ba khutlela ho motho ea letselitseng hang ha phetoho e qala empa pele e fela . Ho feta moo, mohala oa mokhoa ho karolo ea phetoho o tla hlokomolohuoa .

Sheba litokomane tsa rona tsa JavaScript bakeng sa lintlha tse ling .

`.collapse(options)`

E kenya tšebetsong litaba tsa hau joalo ka ntho e ka putlamang. E amohela khetho ea boikhethelo object.

$('#myCollapsible').collapse({
  toggle: false
})

`.collapse('toggle')`

E fetolela ntho e putlahang hore e bontšoe kapa e patiloe. E khutlela ho moletsi pele ntho e putlahang e bonts'oa kapa e patiloe (ke hore pele ketsahalo shown.bs.collapsekapa hidden.bs.collapseketsahalo e etsahala).

`.collapse('show')`

E bonts'a ntho e putlahang. E khutlela ho ea letselitseng pele ntho e putlang e bonts'oa (ke hore pele shown.bs.collapseketsahalo e etsahala).

`.collapse('hide')`

E pata ntho e putlang. E khutlela ho ea letselitseng pele ntho e putlang e patiloe (ke hore pele hidden.bs.collapseketsahalo e etsahala).

`.collapse('dispose')`

E senya ho putlama ha element.

Liketsahalo

Sehlopha sa ho putlama sa Bootstrap se pepesa liketsahalo tse 'maloa bakeng sa ho hokahana le ts'ebetso ea ho putlama.

Mofuta oa Ketsahalo	Tlhaloso
bonts'a.bs. putlama	Ketsahalo ena e tuka hang hang ha `show`mokhoa oa mohlala o bitsoa.
e bontshitsweng.bs.e putlama	Ketsahalo ena e ts'oaroa ha karolo e putlamang e bonahalitsoe ho mosebelisi (e tla emela hore liphetoho tsa CSS li phethehe).
pata.bs. putlama	Ketsahalo ena e lelekoa hang-hang ha `hide`mokhoa o bitsoa.
patiloeng.bs.roha	Ketsahalo ena e ts'oaroa ha ntho e putlama e patetsoe mosebelisi (e tla emela hore liphetoho tsa CSS li phethehe).

$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something...
})