Nahugno

I-toggle ang visibility sa sulod sa imong proyekto gamit ang pipila ka klase ug among JavaScript plugins.

Giunsa kini paglihok

Ang collapse JavaScript plugin gigamit sa pagpakita ug pagtago sa sulod. Ang mga butones o mga angkla gigamit isip mga trigger nga gimapa sa piho nga mga elemento nga imong gi-toggle. Ang pag-collapse sa usa ka elemento magpa-animate sa heightgikan sa kasamtangang bili niini ngadto sa 0. Gihatag kung giunsa pagdumala sa CSS ang mga animation, dili nimo magamit paddingsa usa ka .collapseelemento. Hinuon, gamita ang klase isip usa ka independente nga elemento sa pagputos.

Ang epekto sa animation niini nga sangkap nagdepende sa prefers-reduced-motionpangutana sa media. Tan-awa ang gikunhod nga seksyon sa paglihok sa among dokumentasyon sa accessibility .

Pananglitan

I-klik ang mga buton sa ubos aron ipakita ug itago ang laing elemento pinaagi sa mga kausaban sa klase:

.collapsenagtago sa sulod
.collapsinggigamit sa panahon sa transisyon
.collapse.shownagpakita sa sulod

Mahimo nimong gamiton ang usa ka link nga adunay hrefattribute, o usa ka buton nga adunay data-targetattribute. Sa duha ka mga kaso, ang data-toggle="collapse"gikinahanglan.

Pagsumpay sa href

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>

Daghang mga target

Ang usa <button>o <a>mahimong magpakita ug magtago sa daghang mga elemento pinaagi sa paghisgot niini sa usa ka JQuery nga tigpili sa hrefo data-targethiyas niini. Multiple <button>o <a>mahimong magpakita ug magtago sa usa ka elemento kung ang matag usa kanila maghisgot niini sa ilang hrefo data-targetattribute

I-toggle ang unang elemento

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>

Pananglitan sa akordyon

Gamit ang bahin sa kard , mahimo nimong i-extend ang default nga kinaiya sa pagkahugno aron makamugna og akordyon. Aron sa husto nga pagkab-ot sa estilo sa akordyon, siguroha nga gamiton .accordioningon nga usa ka wrapper.

Anim pariatur cliche reprehenderit, enim eiusmod taas nga kinabuhi accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck nga quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua nagbutang ug langgam sa ibabaw niini 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. Ang mga leggings occaecat craft nga beer farm-to-table, hilaw nga denim aesthetic synth nesciunt tingali wala ka pa makadungog niini nga 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">
      <h2 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>
      </h2>
    </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">
      <h2 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>
      </h2>
    </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">
      <h2 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>
      </h2>
    </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

Siguroha nga idugang aria-expandedsa kontrol nga elemento. Kini nga hiyas tin-aw nga nagpahayag sa kasamtangan nga kahimtang sa nahugno nga elemento nga nahigot sa kontrol sa mga magbabasa sa screen ug susama nga mga teknolohiya sa pagtabang. Kung ang ma-collapsible nga elemento sirado pinaagi sa default, ang attribute sa control element kinahanglan adunay kantidad nga aria-expanded="false". Kung imong gitakda nga ang collapsible nga elemento mahimong bukas pinaagi sa default gamit ang showklase, ibutang aria-expanded="true"sa kontrol. Awtomatiko nga i-toggle sa plugin kini nga attribute sa kontrol base sa kung giablihan o gisirado ang collapsible nga elemento (pinaagi sa JavaScript, o tungod kay gi-trigger sa user ang laing control element nga nahigot usab sa sama nga collapsbile nga elemento). Kung ang elemento sa kontrol nga HTML dili usa ka buton (pananglitan, usa <a>o <div>), ang hiyasrole="button"kinahanglan idugang sa elemento.

Kung ang imong kontrol nga elemento nagpunting sa usa ka nahugno nga elemento - ie ang data-targetattribute nagpunting sa usa ka idselector - kinahanglan nimong idugang ang aria-controlsattribute sa control element, nga adunay sulod idsa collapsible nga elemento. Ang mga moderno nga screen reader ug susamang assistive nga mga teknolohiya naggamit niini nga attribute aron mahatagan ang mga user og dugang nga mga shortcut aron direkta nga maka-navigate sa collapsible nga elemento mismo.

Timan-i nga ang kasamtangang implementasyon sa Bootstrap wala maglakip sa lain-laing mga interaksyon sa keyboard nga gihulagway sa WAI-ARIA Authoring Practices 1.1 accordion pattern - kinahanglan nimo kining iapil sa imong kaugalingon sa custom JavaScript.

Paggamit

Ang collapse plugin naggamit sa pipila ka mga klase sa pagdumala sa bug-at nga pag-alsa:

.collapsenagtago sa sulod
.collapse.shownagpakita sa sulod
.collapsingidugang kung magsugod na ang transisyon, ug tangtangon kung mahuman na

Kini nga mga klase makita sa _transitions.scss.

Pinaagi sa data attributes

Idugang lang data-toggle="collapse"ug a data-targetsa elemento aron awtomatik nga ma-assign ang kontrol sa usa o daghan pa nga nahugno nga mga elemento. Ang data-targethiyas modawat ug CSS selector aron magamit ang pagkahugno. Siguroha nga idugang ang klase collapsesa collapsible nga elemento. Kung gusto nimo nga kini nga default bukas, idugang ang dugang nga klase show.

Aron idugang ang sama sa akordyon nga pagdumala sa grupo ngadto sa usa ka ma-collapsible nga lugar, idugang ang data attribute data-parent="#selector". Tan-awa ang demo aron makita kini nga aksyon.

Pinaagi sa JavaScript

I-enable ang mano-mano gamit ang:

$('.collapse').collapse()

Mga kapilian

Ang mga kapilian mahimong ipasa pinaagi sa mga hiyas sa datos o JavaScript. Para sa data attributes, idugang ang opsyon nga ngalan sa data-, sama sa data-parent="".

Ngalan	Matang	Default	Deskripsyon
ginikanan	tigpili \| jQuery butang \| DOM nga elemento	bakak	Kung gihatag ang ginikanan, nan ang tanan nga mga collapsible nga elemento sa ilawom sa gitakda nga ginikanan pagasirhan kung kini nga collapsible nga butang gipakita. (parehas sa tradisyonal nga pamatasan sa akordyon - kini nagdepende sa `card`klase). Kinahanglang ibutang ang attribute sa target collapsible area.
toggle	boolean	tinuod	I-toggle ang ma-collapsible nga elemento sa pag-ampo

Pamaagi

Asynchronous nga mga pamaagi ug transisyon

Ang tanan nga mga pamaagi sa API kay asynchronous ug magsugod ug transisyon . Mibalik sila sa nanawag sa diha nga nagsugod ang transisyon apan sa wala pa kini matapos . Dugang pa, ang usa ka paagi sa pagtawag sa usa ka transisyon nga sangkap dili tagdon .

Tan-awa ang among JavaScript nga dokumentasyon para sa dugang nga impormasyon .

`.collapse(options)`

Gi-aktibo ang imong sulud ingon usa ka ma-collapsible nga elemento. Modawat ug opsyonal nga mga kapilian object.

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

`.collapse('toggle')`

I-toggle ang usa ka ma-collapsible nga elemento aron ipakita o gitago. Mibalik sa nagtawag sa wala pa ang nahugno nga elemento sa tinuud gipakita o gitago (ie sa wala pa mahitabo ang shown.bs.collapseo hidden.bs.collapsepanghitabo).

`.collapse('show')`

Nagpakita sa usa ka ma-collapsible nga elemento. Mibalik sa nagtawag sa wala pa ang nahugno nga elemento sa tinuud gipakita (ie sa wala pa shown.bs.collapsemahitabo ang panghitabo).

`.collapse('hide')`

Nagtago sa usa ka ma-collapsible nga elemento. Mibalik sa nagtawag sa wala pa ang nahugno nga elemento gitago (ie sa wala pa hidden.bs.collapsemahitabo ang panghitabo).

`.collapse('dispose')`

Giguba ang pagkahugno sa usa ka elemento.

Mga panghitabo

Ang klase sa pagkahugno sa Bootstrap nagpadayag sa pipila ka mga panghitabo alang sa pag-hook sa pag-andar sa pagkahugno.

Uri sa Hitabo	Deskripsyon
show.bs.collapse	Kini nga panghitabo nagdilaab dayon kung ang `show`pamaagi sa pananglitan gitawag.
gipakita.bs.collapse	Kini nga panghitabo gipabuto kung ang usa ka elemento sa pagkahugno nahimo nga makita sa tiggamit (maghulat nga makompleto ang mga transisyon sa CSS).
hide.bs.collapse	Kini nga panghitabo gipabuto dayon kung ang `hide`pamaagi gitawag na.
hidden.bs.collapse	Kini nga panghitabo gipabuto kung ang usa ka elemento sa pagkahugno gitago gikan sa tiggamit (maghulat nga makompleto ang mga transisyon sa CSS).

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