Source

Collapse

Shandura kuoneka kwezviri mukati meprojekiti yako nemakirasi mashoma uye yedu JavaScript plugins.

Zvinoshanda sei

Iyo yekuputsika JavaScript plugin inoshandiswa kuratidza nekuviga zvirimo. Mabhatani kana zvibatiso zvinoshandiswa sezvinokonzeresa zvakamisikidzwa kune chaiwo zvinhu zvaunoshandura. Kupeta chinhu kuno raramisa heightkubva pakukosha kwazvino kusvika 0. Tichifunga kuti CSS inobata sei mifananidzo, haugone kushandisa paddingpane .collapsechinhu. Pane kudaro, shandisa kirasi sechinhu chakazvimirira chekuputira chinhu.

Muenzaniso

Dzvanya mabhatani ari pazasi kuratidza uye kuviga chimwe chinhu kuburikidza nekuchinja kwekirasi:

  • .collapseanovanza zviri mukati
  • .collapsinginoshandiswa panguva yekuchinja
  • .collapse.showinoratidza zvirimo

Unogona kushandisa chinongedzo chine hrefhunhu, kana bhatani rine data-targethunhu. Muzviitiko zvose izvi, data-toggle="collapse"zvinodiwa.

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>

Zvinangwa zvakawanda

A <button>kana <a>inogona kuratidza uye kuvanza zvinhu zvakawanda nekuzvirevera neJQuery selector mune yayo hrefkana data-targethunhu. Yakawanda <button>kana <a>inogona kuratidza uye kuvanza chinhu kana mumwe nemumwe akachinongedzera nechavo hrefkana data-targethunhu

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 muenzaniso

Uchishandisa chikamu chekadhi , unogona kuwedzera maitiro ekudonha kuti ugadzire accordion.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf mwedzi officia aute, kwete cupidatat skateboard dolor brunch. Rori yechikafu quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua isa shiri pairi squid single-origin coffee nulla imaginenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan kunzeeur butcher vice lomo. Leggings occaecat craft doro purazi-ku-tafura, raw denim aesthetic synth nesciunt iwe pamwe hausati wanzwa nezvavo kupomera basa rinogara 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>

Accessibility

Iva nechokwadi chekuwedzera aria-expandedkune chekutonga chinhu. Uhwu hunhu hunoburitsa zviripachena mamiriro azvino echinhu chinokorokoka chakasungirirwa pakutonga kuvaverengi vezvikirini uye mamwe matekinoroji ekubatsira. Kana iyo chinhu chinoputika chakavharwa nekusagadzika, hunhu huri pane chekutonga hunofanirwa kuve nehukoshi hwe aria-expanded="false". Kana iwe wakaseta chinhu chinoputika kuti chivhurwe nekusarudzika uchishandisa showkirasi, isa aria-expanded="true"pane chekutonga panzvimbo. Iyo plugin inozochinja otomatiki hunhu uhu pahutongi zvichibva pakuti kana chinhu chinokorokoka chavhurwa kana kuvharwa (kuburikidza neJavaScript, kana nekuti mushandisi akonzeresa chimwe chinhu chekutonga chakasungirirwa kune imwechete collapsbile element). Kana iyo control element's HTML element isiri bhatani (semuenzaniso, an <a>kana <div>), hunhurole="button"inofanira kuwedzerwa kune element.

Kana chinhu chako chekutonga chiri kunanga chinhu chimwe chinoputsika - kureva kuti data-targethunhu huri kunongedza kune imwe idsarudzo - iwe unofanirwa kuwedzera aria-controlshunhu kuchinhu chekutonga, chine idchechinhu chinodonha. Vaverengi vemazuva ano skrini uye matekinoroji ekubatsira akafanana anoshandisa hunhu uhwu kupa vashandisi mamwe mapfupi ekufamba akananga kuchinhu chinoputika pachacho.

Ziva kuti kuita kwazvino kweBootstrap hakuvharidzise madyirwo ekhibhodi akasiyana anotsanangurwa muWAI-ARIA Authoring Practices 1.1 accordion pateni - unozofanirwa kusanganisa iwe pachako neJavaScript.

Usage

Iyo yekudonha plugin inoshandisa mashoma makirasi kubata inorema kusimudza:

  • .collapseinovanza zviri mukati
  • .collapse.showinoratidza zviri mukati
  • .collapsinginowedzerwa kana shanduko yatanga, uye inobviswa kana yapera

Aya makirasi anogona kuwanikwa mu _transitions.scss.

Via data hunhu

Ingo wedzera data-toggle="collapse"uye a data-targetkune chinhu kuti ugozvigadzike kutonga kwechimwe kana kupfuura chinodonha zvinhu. Hunhu data-targethunogamuchira CSS selector yekushandisa iyo kuputsika. Iva nechokwadi chekuwedzera kirasi collapsekune chinhu chinoputika. Kana uchida kuti risavhurika, wedzera imwe kirasi show.

Kuwedzera accordion-senge boka manejimendi munzvimbo inoputsika, wedzera iyo data hunhu data-parent="#selector". Tarisa kune demo kuti uone izvi mukuita.

Via JavaScript

Vhura nemaoko ne:

$('.collapse').collapse()

Options

Sarudzo dzinogona kupfuudzwa kuburikidza nedata hunhu kana JavaScript. Nezve data hunhu, wedzera iyo sarudzo zita ku data-, semu data-parent="".

Zita Type Default Tsanangudzo
mubereki selector | jQuery chinhu | DOM chikamu nhema Kana mubereki apihwa, zvese zvinopeta pasi pemubereki wataurwa zvichavharwa kana chinhu chinopetana ichi charatidzwa. (zvakafanana nemaitiro echinyakare accordion - izvi zvinoenderana cardnekirasi). Hunhu hunofanirwa kuiswa panzvimbo inoputsika.
toggle boolean chokwadi Inoshandura chinhu chinopeta pakukumbira

Nzira

Asynchronous nzira uye shanduko

Yese nzira dzeAPI dzine asynchronous uye dzinotanga shanduko . Vanodzokera kumunhu anenge afona pachangotanga shanduko asi isati yapera . Pamusoro pezvo, kufona kwenzira pachikamu chekuchinja kuchafuratirwa .

Ona zvinyorwa zvedu zveJavaScript kuti uwane rumwe ruzivo.

.collapse(options)

Inobatisa zvirimo sechinhu chinogoneka. Inobvuma sarudzo dzaungada object.

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

.collapse('toggle')

Inoshandura chinhu chinopeta kuti chiratidze kana kuvanzwa. Inodzokera kune ari kufona chinhu chinopeta chisati charatidzwa kana kuvanzwa (kureva kuti shown.bs.collapsekana hidden.bs.collapsechiitiko chisati chaitika).

.collapse('show')

Inoratidza chinhu chinopeta. Inodzokera kumunhu arikufona chinhu chinopeta chisati charatidzwa (kureva kuti shown.bs.collapsechiitiko chisati chaitika).

.collapse('hide')

Inoviga chinhu chinopeta. Inodzokera kumunhu arikufona chinhu chinopeta chisati chavanzwa (kureva kuti hidden.bs.collapsechiitiko chisati chaitika).

.collapse('dispose')

Inoparadza kuputsika kwechimwe chinhu.

Zviitiko

Bootstrap's kudonha kirasi inofumura zviitiko zvishoma zvekukochekera mukudonha kushanda.

Chiitiko Type Tsanangudzo
show.bs.collapse Ichi chiitiko chinopisa nekukasira kana shownzira yemuenzaniso inodanwa.
display.bs.collapse Chiitiko ichi chinodzingwa kana chinhu chekudonha chaitwa kuti chionekwe kumushandisi (chinomirira kuti CSS shanduko ipedze).
hide.bs.collapse Chiitiko ichi chinodzingwa pakarepo kana hidenzira yadaidzwa.
zvakavanzika.bs.collapse Chiitiko ichi chinodzingwa kana chinhu chekudonha chakavanzwa kubva kumushandisi (chinomirira kuti CSS shanduko ipedze). 
$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})