Source

firodanan'ny

Ampifamadiho ny fahitana ny atiny manerana ny tetikasanao miaraka amin'ny kilasy vitsivitsy sy ny plugins JavaScript.

OHATRA

Kitiho ny bokotra etsy ambany mba hampisehoana sy hanafenana singa hafa amin'ny alàlan'ny fanovana kilasy:

  • .collapsemanafina votoaty
  • .collapsingdia ampiharina mandritra ny tetezamita
  • .collapse.showmampiseho votoaty

Azonao atao ny mampiasa rohy misy ilay hreftoetra, na bokotra misy ilay data-targettoetra. Amin'ireo tranga roa ireo, data-toggle="collapse"dia ilaina ny.

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>

Tanjona marobe

A <button>na <a>afaka mampiseho sy manafina singa maro amin'ny alàlan'ny fanondroana azy ireo amin'ny mpifidy JQuery ao amin'ny hreftoetrany data-target. Maro <button>na <a>afaka mampiseho sy manafina singa iray raha samy milaza izany miaraka amin'ny toetrany hrefna ny data-targettoetrany

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>

Ohatra accordion

Amin'ny fampiasana ny singa karatra , azonao atao ny manitatra ny fitondran-tena firodanan'ny default mba hamoronana akordona.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 amboadia volana officia aute, tsy cupidatat skateboard dolor brunch. Kamiao sakafo quinoa nesciunt laborum eiusmod. Brunch 3 amboadia moon tempor, sunt aliqua asio vorona eo amboniny angisy kafe tokana niaviany nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan exceptioneur mpivaro-kena vice lomo. Leggings occaecat craft beer farm-to-table, denim manta aesthetic synth nesciunt mety mbola tsy naheno azy ireo ianao accusamus labore VHS maharitra.
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>

Accessibility

Ataovy azo antoka ny manampy aria-expandedny singa fanaraha-maso. Ity toetra ity dia mampita mazava ny toetry ny singa mirodana mifatotra amin'ny fanaraha-maso amin'ny mpamaky efijery sy ny teknolojia fanampiana mitovy amin'izany. Raha mihidy amin'ny alàlan'ny default ny singa azo rava, dia tokony hanana sanda aria-expanded="false". Raha toa ianao ka nametraka ny singa azo rava ho misokatra amin'ny alàlan'ny fampiasana ny showkilasy, dia apetraho aria-expanded="true"amin'ny fanaraha-maso kosa. Ny plugin dia hanova ho azy io toetra io amin'ny fanaraha-maso mifototra amin'ny hoe nosokafana na nikatona ilay singa azo rava (amin'ny alàlan'ny JavaScript, na satria ny mpampiasa dia niteraka singa fanaraha-maso hafa izay mifamatotra amin'ilay singa collapsbile ihany koa). Raha tsy bokotra ny singa HTML an'ny singa fanaraha-maso (ohatra, <a>na <div>), ny toetrarole="button"tokony ampiana amin'ny singa.

Raha mikendry singa tokana azo harodana ny singanao - izany hoe ny data-targettoetra dia manondro idmpifidy - tokony ampidirinao amin'ny aria-controlssinga fanaraha-maso ny toetra, misy ny idsinga azo rava. Ireo mpamaky efijery maoderina sy ireo teknolojia fanampiana mitovy amin'izany dia mampiasa an'io toetra io mba hanomezana ireo mpampiasa hitsin-dàlana fanampiny hivezivezy mivantana mankany amin'ilay singa azo rava.

Mariho fa ny fampiharana an'i Bootstrap amin'izao fotoana izao dia tsy mandrakotra ny fifaneraserana amin'ny fitendry isan-karazany voalaza ao amin'ny WAI-ARIA Authoring Practices 1.1 accordion pattern - mila ampidirinao amin'ny JavaScript mahazatra ianao.

Fampiasana

Ny plugin collapse dia mampiasa kilasy vitsivitsy hifehezana ny fampiakarana mavesatra:

  • .collapsemanafina ny votoatiny
  • .collapse.showmampiseho ny votoatiny
  • .collapsingampiana rehefa manomboka ny tetezamita, ary esorina rehefa tapitra

Ireo kilasy ireo dia azo jerena ao amin'ny _transitions.scss.

Amin'ny alàlan'ny data attributes

Ampio fotsiny data-toggle="collapse"ary a data-targetamin'ilay singa mba hanendry ho azy ny fanaraha-maso ny singa iray na maromaro mirodana. Ny data-targettoetra dia manaiky mpifidy CSS hampiharana ny fianjerana. Ataovy azo antoka ny manampy ny kilasy collapseamin'ny singa azo rava. Raha tianao ny hisokatra ho default dia ampio ny kilasy fanampiny show.

Mba hanampiana ny fitantanana vondrona mitovy amin'ny akorandriaka amin'ny faritra azo harodana, ampio ny toetran'ny data data-parent="#selector". Jereo ny demo raha te hahita izany amin'ny hetsika.

Amin'ny JavaScript

Alefa tanana amin'ny:

$('.collapse').collapse()

FANDIKANA

Ny safidy dia azo alefa amin'ny alàlan'ny toetran'ny data na JavaScript. Ho an'ny toetran'ny data, ampidiro amin'ny data-, toy ny ao amin'ny data-parent="".

Anarana Type toerana misy anao Description
ray aman-dreny mpifidy | jQuery object | singa DOM DISO Raha omena ray aman-dreny, dia hikatona avokoa ny singa azo harodana eo ambanin'ny ray aman-dreny voatondro rehefa aseho ity singa azo harodana ity. (mitovitovy amin'ny fihetsika accordion nentim-paharazana - miankina amin'ny cardkilasy izany). Ny toetra dia tsy maintsy apetraka eo amin'ny faritra kendrena mirodana.
mifamadika boolean marina Manova ny singa azo harodana amin'ny fiantsoana

fomba

Fomba sy fifindrana asynchronous

Ny fomba API rehetra dia asynchronous ary manomboka tetezamita . Miverina any amin'ny mpiantso izy ireo raha vao manomboka ny tetezamita fa alohan'ny hifarana . Ho fanampin'izany, tsy hojerena ny fiantsoana fomba iray amin'ny singa tetezamita .

Jereo ny antontan-taratasinay JavaScript raha mila fanazavana fanampiny.

.collapse(options)

Manetsika ny atiny ho singa azo harodana. Manaiky safidy azo atao object.

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

.collapse('toggle')

Manova singa azo harodana ho aseho na afenina. Miverina any amin'ny mpiantso alohan'ny naseho na nafenina ny singa azo rava (izany hoe talohan'ny nitrangan'ny shown.bs.collapsena hidden.bs.collapsehetsika).

.collapse('show')

Mampiseho singa azo harodana. Miverina any amin'ny mpiantso alohan'ny hisehoan'ny singa azo harodana (izany hoe alohan'ny shown.bs.collapsenitrangan'ny hetsika).

.collapse('hide')

Manafina singa azo harodana. Miverina any amin'ny mpiantso alohan'ny tena nafenina ny singa azo harodana (izany hoe alohan'ny hidden.bs.collapsenitrangan'ny hetsika).

.collapse('dispose')

Manimba ny firodanan'ny singa iray.

zava-mitranga

Ny kilasin'ny firodanan'ny Bootstrap dia mampiharihary hetsika vitsivitsy ho an'ny fampifandraisana amin'ny fampandehanana mirodana.

Karazana hetsika Description
show.bs.collapse Mirehitra avy hatrany ity hetsika ity rehefa showantsoina ny fomba fiasa.
aseho.bs.collapse Ity hetsika ity dia alefa rehefa misy singa mirodana hita ho hitan'ny mpampiasa (hiandry ny famitana ny fifindrana CSS).
hide.bs.collapse Ity hetsika ity dia alefa avy hatrany rehefa hidenantsoina ny fomba.
hidden.bs.collapse Ity hetsika ity dia voaroaka rehefa misy singa mianjera nafenina tamin'ny mpampiasa (hiandry ny fifindran'ny CSS ho vita). 
$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})