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.

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.

<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 .

<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

<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.

<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="".

Mekhoa

.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.

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