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 kwayo kuenda ku 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

Kazhinji, tinokurudzira kushandisa bhatani rine data-targethunhu. Kunyange zvisingakurudzirwe kubva pakuona semantic, unogona zvakare kushandisa chinongedzo chine hrefhunhu (uye a role="button"). Muzviitiko zvose izvi, data-toggle="collapse"zvinodiwa.

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

Horizontal

Iyo yekudonha plugin zvakare inotsigira yakachinjika kudonha. Wedzera iyo .widthmodifier kirasi kuti uchinje iyo widthpachinzvimbo heightuye isa widthpane yezvino mwana chinhu. Inzwa wakasununguka kunyora yako wega tsika Sass, shandisa inline masitaera, kana kushandisa yedu yehupamhi zvishandiso .

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

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

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

Accordion muenzaniso

Uchishandisa chikamu chekadhi , unogona kuwedzera maitiro ekudonha kwekutanga kugadzira accordion. Kuti uwane zvakanaka iyo accordion maitiro, ita shuwa kushandisa .accordionsekuputira.

<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

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 control pane. Iyo plugin inozochinja otomatiki hunhu uhu pahutongi zvichibva pakuti kana chinhu chinokorokoka chavhurwa kana kuvharwa (kuburikidza neJavaScript, kana nekuti mushandisi akonzeresa chimwe chinhu chekudzora chakasungirirwa kune chimwe chinhu chinoputika). 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 muARIA Authoring Practices Guide accordion pateni - unozofanirwa kusanganisa izvi 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="".

Nzira

.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 kune ari kufona 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.

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