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.

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

Kasagaran, girekomenda namon ang paggamit sa usa ka buton nga adunay data-targethiyas. Bisan kung dili girekomenda gikan sa usa ka semantiko nga punto sa pagtan-aw, mahimo ka usab mogamit usa ka link nga adunay hrefhiyas (ug usa ka role="button"). Sa duha ka mga kaso, ang data-toggle="collapse"gikinahanglan.

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

Pahigda

Ang collapse plugin nagsuporta usab sa horizontal collapsing. Idugang ang .widthklase sa modifier aron i-transition ang widthimbes heightug ibutang ang usa widthsa diha-diha nga elemento sa bata. Mobati nga gawasnon sa pagsulat sa imong kaugalingon nga kostumbre nga Sass, gamita ang inline nga mga istilo, o gamita ang among gilapdon nga mga gamit .

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

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

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

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.

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

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 ang kini nga attribute sa kontrol base sa kung giablihan o gisirado ang collapsible nga elemento (pinaagi sa JavaScript, o tungod kay ang user nag-trigger og laing control element nga nahigot usab sa samang collapsible 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 pagpatuman sa Bootstrap wala maglakip sa lain-laing mga interaksyon sa keyboard nga gihulagway sa ARIA Authoring Practices Guide accordion pattern - kinahanglan nimo nga iapil kini 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-targetattribute 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="".

Pamaagi

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

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