in English

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

Ka kakaretso, re khothaletsa ho sebelisa konopo e nang le data-targettšobotsi. Leha e sa khothaletsoe ho tsoa ponong ea semantic, o ka sebelisa sehokelo se nang le hreftšobotsi (le a role="button"). Maemong ana ka bobeli, ho data-toggle="collapse"hlokahala.

Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
<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">
    Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
  </div>
</div>

E tshekaletseng

Ho putlama ha plugin ho boetse ho ts'ehetsa ho putlama ho otlolohileng. Eketsa sehlopha sa .widthmodifier ho fetola ho e width-na heightle ho beha ntho widthe haufi ea ngoana. Ikutloe u lokolohile ho ngola Sass ea hau ea tloaelo, sebelisa setaele sa inline, kapa sebelisa lisebelisoa tsa rona tsa bophara .

Ka kopo elelloa hore le hoja mohlala o ka tlase o na le mokhoa oa min-heightho qoba ho penta ho feteletseng ho litokomane tsa rona, sena ha se hlokehe ka ho hlaka. Ho hlokahala feela karolo widthea ngoana.

This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
<p>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample">
    Toggle width collapse
  </button>
</p>
<div style="min-height: 120px;">
  <div class="collapse width" id="collapseWidthExample">
    <div class="card card-body" style="width: 320px;">
      This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
    </div>
  </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

Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
<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">
        Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
      </div>
    </div>
  </div>
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample2">
      <div class="card card-body">
        Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
      </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.

Litaba tse ling tsa setšoantšisi bakeng sa phanele ea pele ea accordion. Phanele ena e bontšoa ka ho sa feleng, ka lebaka la .showsehlopha.

Some placeholder content for the second accordion panel. This panel is hidden by default.

And lastly, the placeholder content for the third and final accordion panel. This panel is hidden by default.
<div class="accordion" id="accordionExample">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h2 class="mb-0">
        <button class="btn btn-link btn-block text-left" 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">
        Some placeholder content for the first accordion panel. This panel is shown by default, thanks to the <code>.show</code> class.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingTwo">
      <h2 class="mb-0">
        <button class="btn btn-link btn-block text-left 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">
        Some placeholder content for the second accordion panel. This panel is hidden by default.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingThree">
      <h2 class="mb-0">
        <button class="btn btn-link btn-block text-left 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">
        And lastly, the placeholder content for the third and final accordion panel. This panel is hidden by default.
      </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 lisebelisoa tse ling tse thusang. 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 hau ea taolo 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 tsa 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 ARIA Authoring Practices Guide paterone ea accordion - o tla hloka ho kenyelletsa tsena ka bouena le JavaScript ea tloaelo.

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 fela

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 o 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 ka bokelloang tlas'a motsoali ea boletsoeng li tla koaloa ha ntho ena e bonohang e bontšoa. (e ts'oanang le boitšoaro ba accordion ea setso - sena se itšetlehile ka cardsehlopha). 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
bontša.bs. putlama Ketsahalo ena e tuka hang hang ha showmokhoa oa mohlala o bitsoa.
e bontshitsweng.bs.e putlama Ketsahalo ena e ts'oaroa ha ntho e putlama e bonahalitsoe ho mosebelisi (e tla emela hore liphetoho tsa CSS li phethehe).
pata.bs. putlama Ketsahalo ena e lelekoa hang-hang ha hidemokhoa o bitsoa.
patiloeng.bs.roha Ketsahalo ena e ts'oaroa ha ntho e putlamang e patetsoe mosebelisi (e tla emela hore liphetoho tsa CSS li phethehe).
$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something...
})