Source

Dze anyi

Trɔ asi le emenyawo ƒe dzedzeme ŋu le wò dɔa katã me kple klass ʋee aɖewo kple míaƒe JavaScript ƒe kpeɖeŋutɔwo.

Kpɔɖeŋu

Zi abɔti siwo le ete dzi be nàɖe nu bubu aɖe afia ahaɣlae to klass ƒe tɔtrɔwo dzi:

  • .collapseɣlaa nyatakaka siwo le eme
  • .collapsingwozãnɛ le tɔtrɔwo me
  • .collapse.showɖea emenyawo fiana

Àte ŋu azã kadodo si me hrefnɔnɔmea le, alo abɔta si me data-targetnɔnɔmea le. Le go eveawo siaa me la, data-toggle="collapse"wobia tso ame si.

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>

Taɖodzinu geɖe

A <button>alo <a>ateŋu aɖe nu geɖewo afia ahaɣla wo to wo yɔyɔ kple JQuery tiatia le eƒe hrefalo data-targetnɔnɔme me. Geɖe <button>alo <a>ateŋu aɖe element aɖe afia ahaɣlae ne wo dometɔ ɖesiaɖe ƒo nu tso eŋu kple woƒe hrefalo data-targetnɔnɔme

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

Accordion ƒe kpɔɖeŋu

Ne èzã kaɖia ƒe akpaa la, àte ŋu akeke collapse behavior si woɖo ɖi la ɖe enu atsɔ awɔ accordion.

Anim pariatur cliche reprehenderit, enim eiusmod agbe kɔkɔ accusamus terry richardson ad squid. 3 amegãxi ɣleti officia aute, non cupidat skateboard dolor brunch. Nuɖuɖu agbatsɔʋu quinoa nesciunt laborum eiusmod. Brunch 3 amegãxi dzinu tempor, sunt aliqua tsɔ xevi aɖe ɖo edzi squid ɖeka-dzɔtsoƒe kɔfi nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, asinudɔwɔwɔ biya dɔwɔwɔ wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur lãwula vice lomo. Leggings occaecat aɖaŋu biya agble-ɖe-kplɔ̃, raw denim atsyɔ̃ɖoɖo synth nesciunt ɖewohĩ mèse wo 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.
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 id="accordion">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h5 class="mb-0">
        <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </button>
      </h5>
    </div>

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

Mɔnukpɔkpɔwo ƒe Mɔnukpɔkpɔ

Kpɔ egbɔ be yetsɔe kpe aria-expandedɖe nusi dzi wokpɔna ŋu. Nɔnɔme sia ɖea nusi woate ŋu agbã si wobla ɖe dziɖuɖua ŋu ƒe nɔnɔme fifia fiana tẽe na screen readers kple kpekpeɖeŋunamɔnu mawo tɔgbe. Ne wotu nusi woateŋu agbã la le gɔmedzedzea me la, ele be nɔnɔme si le dziɖuɖu ƒe akpaa dzi ƒe asixɔxɔ nanye aria-expanded="false". Ne èɖo collapsible element la be wòaʋu le gɔmedzedzea me to showklass la zazã me la, ɖoe aria-expanded="true"ɖe control la dzi boŋ. Plugin la atrɔ nɔnɔme sia le eɖokui si ɖe dziɖuɖua dzi le nenye be woʋu alo wotu nusi woate ŋu agbã la alo womeʋui o (to JavaScript dzi, alo esi zãla la ʋu dziɖuɖunu bubu si hã bla ɖe collapsbile element ma ke ŋu ta). Ne dziɖuɖu ƒe akpaa ƒe HTML akpaa menye abɔta o (le kpɔɖeŋu me, an <a>alo <div>), nɔnɔmearole="button"ele be woatsɔe akpe ɖe element la ŋu.

Ne wò dziɖuɖu ƒe akpaa le taɖodzinu ɖom ɖe nu ɖeka si woate ŋu agbã ŋu – i.e. data-targetnɔnɔme la le asi fiam idtiatiawɔla aɖe – ele be nàtsɔ aria-controlsnɔnɔmea akpe ɖe dziɖuɖu ƒe akpaa ŋu, si me akpa idsi woate ŋu agbã la ƒe la le. Egbegbe screen readerwo kple mɔ̃ɖaŋununya mawo tɔgbe siwo kpena ɖe ame ŋu wɔa nɔnɔme sia ŋudɔ tsɔ naa mɔ kpui bubuwo zazãlawo be woazɔ mɔ ayi nusi woate ŋu agbã la ŋutɔ gbɔ tẽ.

De dzesii be Bootstrap ƒe dɔwɔwɔ fifia meku ɖe keyboard ƒe kadodo vovovo siwo ŋu woƒo nu tsoe le WAI-ARIA Authoring Practices 1.1 accordion ƒe nɔnɔme me ŋu o - ahiã be wò ŋutɔ nàtsɔ esiawo ade JavaScript tɔxɛa me.

Zãzã

Collapse plugin la zãa klass ʋee aɖewo tsɔ kpɔa kpekpeme kɔkɔa gbɔ:

  • .collapseɣlaa emenyawo
  • .collapse.showɖea emenyawo fiana
  • .collapsingwotsɔa kpenɛ ne tɔtrɔa dze egɔme, eye woɖenɛ ɖa ne ewu enu

Woate ŋu akpɔ klass siawo le _transitions.scss.

To nyatakaka ƒe nɔnɔmewo dzi

Ðeko nàtsɔ data-toggle="collapse"kple a akpe data-targetɖe element la ŋu be nàde dɔ asi na element ɖeka alo esi wu nenema si woate ŋu agbã la dzi kpɔkpɔ le eɖokui si. Nɔnɔmea data-targetxɔa CSS tiatia aɖe be woatsɔ awɔ collapse la ŋudɔ ɖe. Kpɔ egbɔ be yetsɔ klass la kpe collapseɖe nusi woate ŋu agbã ŋu. Ne èdi be wòaʋu le gɔmedzedzea me la, tsɔ klass bubu kpee show.

Be nàtsɔ ƒuƒoƒodzikpɔkpɔ si le abe accordion ene akpe ɖe teƒe si woate ŋu agbã ŋu la, tsɔ nyatakaka ƒe nɔnɔme kpe ɖe eŋu data-parent="#selector". Kpɔ demo la be nàkpɔ esia le dɔwɔwɔ me.

To JavaScript dzi

Na wòawɔ dɔ kple asi kple:

$('.collapse').collapse()

Tiatiawɔblɔɖewo

Woateŋu atsɔ tiatiawɔblɔɖewo ato nyatakaka ƒe nɔnɔmewo alo JavaScript dzi. Le nyatakaka ƒe nɔnɔmewo gome la, tsɔ tiatia ƒe ŋkɔ kpe ɖe data-, abe alesi wòle le data-parent="".

Ŋkɔ Ƒomevi Gᴐmedzeƒe Nuɖᴐɖᴐ
dzila tiatiawɔla | jQuery ƒe nu | DOM ƒe akpa aɖe alakpa Ne dzila na la, ekema woatu nusiwo katã woateŋu agbã le dzila si woɖo la te ne woɖe nu sia si woateŋu agbã la fia. (si sɔ kple accordion ƒe nuwɔna deŋgɔ - esia nɔ te ɖe cardklass la dzi). Ele be woaɖo nɔnɔmea ɖe taɖodzinu si woate ŋu agbã la dzi.
trɔ asi le eŋu boolean ƒe ƒuƒoƒo nyateƒe Trɔa nusi woate ŋu agbã la le yɔyɔ dzi

Mɔnuwo

Mɔnu siwo mewɔ ɖeka kple ɣeyiɣi aɖeke o kple tɔtrɔwo

API mɔnuwo katã nye asynchronous eye wodzea tɔtrɔ gɔme . Wotrɔna yia ame si le ka ƒom na la gbɔ ne wonya dze tɔtrɔa gɔme ko gake hafi wòwu enu . Tsɔ kpe ɖe eŋu la, woaŋe aɖaba aƒu mɔnu ƒe yɔyɔ aɖe si le akpa aɖe si le tɔtrɔm dzi dzi .

Kpɔ míaƒe JavaScript nuŋlɔɖiwo hena nyatakaka bubuwo.

.collapse(options)

Ewɔa wò nyatakakawo ŋudɔ abe nusi woate ŋu agbã ene. Lɔ̃ ɖe tiatia siwo woate ŋu awɔ le wo ɖokui si dzi object.

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

.collapse('toggle')

Trɔa nusi woate ŋu agbã la ɖe nusi woɖe fia alo woɣla ɖe eme. Trɔ yi yɔla gbɔ hafi woɖe nusi woateŋu agbã la afia ŋutɔŋutɔ alo aɣlae (si nye hafi shown.bs.collapsealo hidden.bs.collapsenudzɔdzɔa nadzɔ).

.collapse('show')

Fia nusi woate ŋu agbã. Trɔ yi yɔla gbɔ hafi woɖe nusi woateŋu agbã la afia ŋutɔŋutɔ (si nye hafi shown.bs.collapsenudzɔdzɔa nadzɔ).

.collapse('hide')

Eɣlaa nusi woate ŋu agbã. Trɔ yi yɔla gbɔ hafi woɣla nusi woateŋu agbã la ŋutɔŋutɔ (si nye hafi hidden.bs.collapsenudzɔdzɔa nadzɔ).

.collapse('dispose')

Egblẽa nu le nu vevi aɖe ƒe anyidzedze ŋu.

Nudzɔdzɔwo

Bootstrap ƒe collapse klass ɖea nudzɔdzɔ ʋee aɖewo ɖe go na hooking ɖe collapse dɔwɔwɔ me.

Nudzɔdzɔ Ƒomevi Nuɖᴐɖᴐ
ɖee fia.bs.collapse Nudzɔdzɔ sia doa dzo enumake ne woyɔ showkpɔɖeŋu mɔnu la.
woɖee fia.bs.collapse Woɖea nudzɔdzɔ sia ne wowɔ collapse element aɖe be wòadze na zãla (alala CSS ƒe tɔtrɔwo be woawu enu).
ɣla.bs.kollapse Wodaa tu nudzɔdzɔ sia enumake ne woyɔ hidemɔnua vɔ.
hidden.bs.wo ƒe ƒuƒoƒo Woɖea nudzɔdzɔ sia ne woɣla collapse element aɖe ɖe zãla la (alala be CSS ƒe tɔtrɔwo nawu enu).
$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})