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

Hi ntolovelo, hi ringanyeta ku tirhisa buti leyi nga ni data-targetxihlawulekisi. Hambileswi swi nga bumabumeriwiki hi ku ya hi langutelo ra semantiki, u nga ha tlhela u tirhisa xihlanganisi lexi nga ni hrefxihlawulekisi (na a role="button"). Eka swiyimo leswimbirhi, ku data-toggle="collapse"laveka the.

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

Ololoka

Plugin ya ku wa yi tlhela yi seketela ku wa ka horizontal. Engetelani .widthtlilasi ya mucinci ku hundzula widthematshan’wini ya heightna ku veka a widtheka elemente ya n’wana wa le kusuhi. Titwele u ntshunxekile ku tsala Sass ya wena ya ntolovelo, tirhisa switayele swa le ndzeni ka layini, kumbe u tirhisa switirhisiwa swa hina swa ku anama .

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

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

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

Xikombiso xa accordion

Hi ku tirhisa xiphemu xa khadi , u nga engetela mahanyelo ya ku wisa ya ntolovelo leswaku u endla accordion. Leswaku u fikelela kahle xitayili xa accordion, tiyiseka leswaku u xi tirhisa .accordiontanihi xifunengeto.

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

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 lexi pfaleriwaka). Loko xiaki 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 xivumbeko xa accordion xa ARIA Authoring Practices Guide - u ta lava ku katsa leswi hi wexe hi 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="".

Maendlelo

.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 ku ya eka lexi kombisiweke kumbe lexi fihliweke. 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.

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