Source

Ku wa

Cinca ku vonaka ka swilo leswi nga endzeni eka phurojeke ya wena hinkwayo hi titlilasi ti nga ri tingani na swiengetelo swa hina swa JavaScript.

Ndlela leyi swi tirhaka ha yona

Plugin ya JavaScript ya collapse yi tirhisiwa ku kombisa na ku fihla leswi nga endzeni. Tiboto kumbe ti-anchor ti tirhisiwa tanihi swihlohloteri leswi mepiweke eka swiaki swo karhi leswi u swi cinca-cincaka. Ku pfotlosa elemente swi ta endla leswaku ku hanya ku heightsuka eka nkoka wa yona wa sweswi ku ya eka 0. Loko u nyikiwa ndlela leyi CSS yi khomaka swifaniso leswi hanyaka ha yona, a wu nge swi koti ku tirhisa paddingeka .collapseelemente. Ematshan’weni ya sweswo, tirhisa tlilasi tanihi xiaki xo phutsela lexi tiyimeleke.

Xikombiso

Click ti buttons leti nga laha hansi ku kombisa no fihla element yin’wana hi ku tirhisa ku cinca ka class:

  • .collapseyi fihla leswi nga endzeni
  • .collapsingyi tirhisiwa hi nkarhi wa ku cinca
  • .collapse.showyi kombisa leswi nga endzeni

U nga tirhisa xihlanganisi lexi nga ni hrefxihlawulekisi, kumbe buti leyi nga ni data-targetxihlawulekisi. Eka swiyimo leswimbirhi, ku data-toggle="collapse"laveka the.

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>

Swikongomiso swo tala

A <button>kumbe <a>yi nga kombisa no fihla swiaki swo tala hi ku swi kombetela hi xihlawulekisi xa JQuery eka xihlawulekisi xa yona hrefkumbe data-target. Multiple <button>kumbe <a>va nga kombisa no tumbeta elemente loko un’wana na un’wana a yi kombetela hi yona hrefkumbe data-targetattribute

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>

Xikombiso xa accordion

Hi ku tirhisa xiphemu xa khadi , u nga engetela mahanyelo ya ku wisa ya ntolovelo leswaku u endla accordion.

Anim pariatur cliche reprehenderit, enim eiusmod vutomi bya le henhla accusamus terry richardson ad ximanga. 3 mpfundla wa n’weti officia aute, non cupidatat xikanyakanya dolor brunch. Lori ya swakudya quinoa nesciunt laborum eiusmod. Brunch 3 mpfundla n’weti tempo, sunt aliqua veka xinyenyana eka yona squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, ntirho wa vutshila bya biya wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur mutirhi wa nyama vice lomo. Leggings occaecat craft beer purasi-ku-tafula, raw denim aesthetic synth nesciunt kumbexana a wu si twa hi vona 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 class="accordion" id="accordionExample">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h5 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>
      </h5>
    </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">
      <h5 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>
      </h5>
    </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">
      <h5 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>
      </h5>
    </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>

Ku fikelela

Tiyisisa leswaku u engetela aria-expandedeka xiaki xa vulawuri. Xihlawulekisi lexi xi hundzisela hi ku kongoma xiyimo xa sweswi xa xiaki lexi pfotlosaka lexi bohiweke eka vulawuri eka vahlayi va xikirini na thekinoloji yo pfuneta yo fana. Loko xiaki lexi nga pfaleriwaka xi pfariwile hi ku tiyimisela, xihlawulekisi eka xiaki xa vulawuri xi fanele ku va na ntikelo wa aria-expanded="false". Loko u vekile elemente leyi nga pfaleriwaka leswaku yi pfuleka hi ku tiyimisela hi ku tirhisa showtlilasi, veka aria-expanded="true"eka vulawuri ematshan’wini ya sweswo. Plugin yi ta cinca-cinca hi yoxe xihlawulekisi lexi eka vulawuri hi ku ya hi loko kumbe e-e xiaki lexi nga pfaleriwaka xi pfuriwile kumbe ku pfariwa (hi ku tirhisa JavaScript, kumbe hikuva mutirhisi u pfuxe xiaki xin’wana xa vulawuri lexi na xona xi bohiweke eka xiaki lexi fanaka xa collapsbile). Loko xiphemu xa HTML xa xiaki xa vulawuri xi nga ri buti (xikombiso, an <a>kumbe <div>), xihlawulekisirole="button"yi fanele ku engeteriwa eka elemente.

Loko xiaki xa wena xa vulawuri xi kongomisa eka xiaki xin’we lexi nga pfaleriwaka – i.e. data-targetxihlawulekisi xi kombetela eka idxihlawulekisi – u fanele ku engetela aria-controlsxihlawulekisi eka xiaki xa vulawuri, lexi nga na idxa xiaki lexi pfaleriwaka. Swihlaya swa xikirini swa manguva lawa na thekinoloji yo pfuneta leyi fanaka swi tirhisa xihlawulekisi lexi ku nyika vatirhisi swipfuxeto leswi engetelekeke swo famba hi ku kongoma eka xiaki lexi nga pfaleriwaka hi xoxe.

Xiya leswaku ku tirhisiwa ka sweswi ka Bootstrap a ku katsi ku tirhisana ko hambana ka khibhodi loku hlamuseriweke eka WAI-ARIA Authoring Practices 1.1 accordion pattern - u ta lava ku katsa leswi hi wexe na JavaScript ya ntolovelo.

Matirhiselo

Plugin ya ku wa yi tirhisa titlilasi ti nga ri tingani ku khoma ku tlakusa swilo swo tika:

  • .collapseyi fihla leswi nga endzeni
  • .collapse.showyi kombisa leswi nga endzeni
  • .collapsingyi engeteriwa loko ku cinca ku sungula, naswona yi susiwa loko ku herile

Titlilasi leti ti nga kumeka eka _transitions.scss.

Hi ku tirhisa swihlawulekisi swa data

Ntsena engetela data-toggle="collapse"na a data-targeteka elemente ku avela hi ku tisungulela vulawuri bya elemente yin’we kumbe ku tlula leyi nga tshovekaka. Xihlawulekisi data-targetxi amukela xihlawulekisi xa CSS ku tirhisa ku wisa eka xona. Tiyiseka leswaku u engetela tlilasi collapseeka xiaki lexi nga pfaleriwaka. Loko u lava leswaku yi pfuleka hi ku tiyimisela, engetela tlilasi leyi engetelekeke show.

Ku engetela vulawuri bya ntlawa lebyi fanaka ni bya accordion eka ndhawu leyi nga pfaleriwaka, engetela xihlawulekisi xa data data-parent="#selector". Languta eka demo ku vona leswi swi ri karhi swi tirha.

Hi ku tirhisa JavaScript

Endla leswaku swi tirha hi voko hi:

$('.collapse').collapse()

Swihlawulekisi

Swihlawulekisi swi nga hundzisiwa hi ku tirhisa swihlawulekisi swa data kumbe JavaScript. Eka swihlawulekisi swa datha, engetela vito ra xihlawuhlawu eka data-, tanihi le ka data-parent="".

Vito Muxaka Ku tlula Nhlamuselo
mutswari xihlawulekisi xa swilo | jNchumu wa xivutiso | Xiphemu xa DOM vunwa Loko mutswari a nyikiwile, kutani swiaki hinkwaswo leswi pfaleriwaka ehansi ka mutswari loyi a boxiweke swi ta pfala loko nchumu lowu wu pfaleriwaka wu kombisiwa. (ku fana na mahanyelo ya ndhavuko ya accordion - leswi swi titshege hi cardtlilasi). Xihlawulekisi xi fanele ku vekiwa eka ndhawu leyi kongomisiweke leyi nga pfaleriwaka.
ku cinca-cinca xitsonga xitsonga ntiyiso Ku cinca-cinca xiaki lexi nga pfaleriwaka eka ku vitaniwa

Maendlelo

Maendlelo ya asynchronous na ku cinca

Maendlelo hinkwawo ya API i ya asynchronous naswona ya sungula ku cinca . Va tlhelela eka mufoyini hi ku hatlisa loko ku cinca ku sungurile kambe ku nga si hela . Ku engetela kwalaho, ku vitaniwa ka ndlela eka xiphemu lexi cincaka ku ta honisiwa .

Vona matsalwa ya hina ya JavaScript ku kuma vuxokoxoko byo tala.

.collapse(options)

Ku endla leswaku nhundzu ya wena yi tirha tanihi xiaki lexi nga pfaleriwaka. Ku amukela swihlawulekisi swa ku hlawula object.

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

.collapse('toggle')

Ku cinca-cinca xiaki lexi nga pfaleriwaka leswaku xi kombisiwa kumbe xi fihliwile. Ku tlhelela eka mufoyini xiaki lexi nga pfaleriwaka xi nga si kombisiwa hakunene kumbe ku fihliwa (i.e. emahlweni ka ku humelela shown.bs.collapsekumbe hidden.bs.collapsexiendlakalo).

.collapse('show')

Ku kombisa xiaki lexi nga tshovekaka. Ku tlhelela eka mufoyini xiaki lexi nga pfaleriwaka xi nga si kombisiwa hakunene (i.e. shown.bs.collapsexiendlakalo xi nga si humelela).

.collapse('hide')

Ku tumbeta xiaki lexi nga tshovekaka. Ku tlhelela eka mufoyini xiaki lexi nga pfaleriwaka xi nga si fihliwa hakunene (i.e. hidden.bs.collapsexiendlakalo xi nga si humelela).

.collapse('dispose')

Ku herisa ku wa ka elemente.

Swiendlakalo

Tlilasi ya ku wa ya Bootstrap yi paluxa swiendlakalo swi nga ri swingani swo khoma eka ntirho wa ku wa.

Muxaka wa Xiendlakalo Nhlamuselo
kombisa.bs.ku wa Xiendlakalo lexi xi pfurha hi ku hatlisa loko ku showvitaniwa ndlela ya xikombiso.
swi kombisiwile.bs.collapse Xiendlakalo lexi xi duvuriwa loko xiphemu xa ku wa xi endliwile xi vonaka eka mutirhisi (xi ta rindza ku cinca ka CSS ku hetisisiwa).
fihla.bs.ku pfula Xiendlakalo lexi xi duvuriwa hi ku hatlisa loko hidendlela yi vitaniwile.
ku fihliwile.bs.ku wisa Xiendlakalo lexi xi duvuriwa loko xiphemu xa ku wa xi fihliwile eka mutirhisi (xi ta rindza ku cinca ka CSS ku hela). 
$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})