Tlula eka nhlokomhaka-nkulu Tlula eka docs navigation

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.

Vuyelo bya animation bya xiphemu lexi byi titshege hi prefers-reduced-motionxivutiso xa midiya. Vona xiyenge xa ​​ku famba loku hungutiweke xa matsalwa ya hina ya ku fikelela .

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-bs-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-bs-toggle="collapse"laveka the.

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-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  </a>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Button with data-bs-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 .collapse-horizontaltlilasi 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 .

Hi kombela u xiya leswaku hambileswi xikombiso lexi nga laha hansi xi nga ni min-heightsete yo papalata ku penda nakambe ku tlula mpimo eka ti-doc ta hina, leswi a swi laveki hi ku kongoma. Ku laveka ntsena widthelemente ya on the child.

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-bs-toggle="collapse" data-bs-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample">
    Toggle width collapse
  </button>
</p>
<div style="min-height: 120px;">
  <div class="collapse collapse-horizontal" id="collapseWidthExample">
    <div class="card card-body" style="width: 300px;">
      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 eka xihlawulekisi xa yona hrefkumbe data-bs-target. Multiple <button>kumbe <a>va nga kombisa no tumbeta elemente loko un’wana na un’wana a yi kombetela hi yona hrefkumbe data-bs-targetattribute

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-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-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>

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, sete yi fanele ku engeteriwa eka elemente.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"

Loko xiaki xa wena xa vulawuri xi kongomisa eka xiaki xin’we lexi nga pfaleriwaka – i.e. data-bs-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 nga hlawuriki loku hlamuseriweke eka xivumbeko xa accordion xa WAI-ARIA Authoring Practices 1.1 - u ta lava ku katsa leswi hi wexe hi JavaScript ya ntolovelo.

Sass

Swilo leswi cinca-cincaka

$transition-collapse:         height .35s ease;
$transition-collapse-width:   width .35s ease;

Titlilasi

Titlilasi ta ku cinca ka ku wa ti nga kumeka eka scss/_transitions.scsstanihileswi leti ti avelaniwa ku tsemakanya swiphemu swo tala (ku wa na accordion).

.collapse {
  &:not(.show) {
    display: none;
  }
}

.collapsing {
  height: 0;
  overflow: hidden;
  @include transition($transition-collapse);

  &.collapse-horizontal {
    width: 0;
    height: auto;
    @include transition($transition-collapse-width);
  }
}

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-bs-toggle="collapse"na a data-bs-targeteka elemente ku avela hi ku tisungulela vulawuri bya elemente yin’we kumbe ku tlula leyi nga tshovekaka. Xihlawulekisi data-bs-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-bs-parent="#selector". Languta eka tluka ra accordion ku kuma vuxokoxoko byo tala.

Hi ku tirhisa JavaScript

Endla leswaku swi tirha hi voko hi:

var collapseElementList = [].slice.call(document.querySelectorAll('.collapse'))
var collapseList = collapseElementList.map(function (collapseEl) {
  return new bootstrap.Collapse(collapseEl)
})

Swihlawulekisi

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

Vito Muxaka Ku tlula Nhlamuselo
parent xihlawulekisi xa swilo | jNchumu wa xivutiso | Xiphemu xa DOM false 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.
toggle xitsonga xitsonga true 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 .

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

U nga endla xikombiso xa ku pfaleka hi muaki, xikombiso:

var myCollapse = document.getElementById('myCollapse')
var bsCollapse = new bootstrap.Collapse(myCollapse, {
  toggle: false
})
Ndlela Nhlamuselo
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).
show Ku kombisa xiaki lexi nga tshovekaka. Ku tlhelela eka mufoyini xiaki lexi nga pfaleriwaka xi nga si kombisiwa hakunene (xikombiso, shown.bs.collapsexiendlakalo xi nga si humelela).
hide Ku tumbeta xiaki lexi nga tshovekaka. Ku tlhelela eka mufoyini xiaki lexi nga pfaleriwaka xi nga si fihliwa hakunene (xikombiso, hidden.bs.collapsexiendlakalo xi nga si humelela).
dispose Ku herisa ku wa ka elemente. (Ku susa data leyi hlayisiweke eka elemente ya DOM)
getInstance Static method leyi ku pfumelelaka ku kuma collapse instance leyi fambelanaka na DOM element, u nga yi tirhisa hi ndlela leyi:bootstrap.Collapse.getInstance(element)
getOrCreateInstance Ndlela ya static leyi vuyisaka xikombiso xa collapse lexi fambelanaka na elemente ya DOM kumbe ku tumbuluxa leyintshwa loko ko tshuka ku nga sunguriwanga. U nga yi tirhisa hi ndlela leyi:bootstrap.Collapse.getOrCreateInstance(element)

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
show.bs.collapse Xiendlakalo lexi xi pfurha hi ku hatlisa loko ku showvitaniwa ndlela ya xikombiso.
shown.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).
hide.bs.collapse Xiendlakalo lexi xi duvuriwa hi ku hatlisa loko hidendlela yi vitaniwile.
hidden.bs.collapse Xiendlakalo lexi xi duvuriwa loko xiphemu xa ku wa xi fihliwile eka mutirhisi (xi ta rindza ku cinca ka CSS ku hela).
var myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', function () {
  // do something...
})