Source

Cwymp

Toglo gwelededd cynnwys ar draws eich prosiect gydag ychydig o ddosbarthiadau a'n ategion JavaScript.

Sut mae'n gweithio

Defnyddir yr ategyn cwymp JavaScript i ddangos a chuddio cynnwys. Defnyddir botymau neu angorau fel sbardunau sy'n cael eu mapio i elfennau penodol y byddwch yn eu toglo. Bydd cwympo elfen yn animeiddio'r heighto'i gwerth cyfredol i 0. O ystyried sut mae CSS yn trin animeiddiadau, ni allwch ddefnyddio paddingar .collapseelfen. Yn lle hynny, defnyddiwch y dosbarth fel elfen lapio annibynnol.

Enghraifft

Cliciwch y botymau isod i ddangos a chuddio elfen arall trwy newidiadau dosbarth:

  • .collapseyn cuddio cynnwys
  • .collapsingyn cael ei gymhwyso yn ystod trawsnewidiadau
  • .collapse.showyn dangos cynnwys

Gallwch ddefnyddio dolen gyda'r hrefpriodoledd, neu botwm gyda'r data-targetpriodoledd. Yn y ddau achos, data-toggle="collapse"mae'n ofynnol.

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>

Targedau lluosog

Gall A <button>neu <a>ddangos a chuddio elfennau lluosog trwy gyfeirio atynt gyda dewisydd JQuery yn ei hrefneu data-targetbriodoledd. Lluosog <button>neu gall ddangos a chuddio elfen os yw <a>pob un ohonynt yn cyfeirio ato gyda'u hrefpriodwedddata-target

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>

Enghraifft acordion

Gan ddefnyddio'r gydran cerdyn , gallwch chi ymestyn yr ymddygiad cwympo rhagosodedig i greu acordion.

Anim pariatur cliche reprehenderit, enim eiusmod bywyd uchel accusamus terry richardson a sgwid. 3 blaidd lleuad officia aute, non cupidatat sgrialu dolor brunch. Tryc bwyd quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua rhoi aderyn arno squid un-tarddiad coffi nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, cwrw crefft laboure wes anderson cred nesciunt sapiente ea proident. Ad vegan butcher cigydd vice lomo. Legins occaecat cwrw crefft fferm-i-bwrdd, synth esthetig denim amrwd nesciunt mae'n debyg nad ydych wedi clywed amdanynt accusamus laboure VHS cynaliadwy.
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>

Hygyrchedd

Byddwch yn siwr i ychwanegu aria-expandedat yr elfen reoli. Mae'r nodwedd hon yn cyfleu'n benodol gyflwr presennol yr elfen gwympadwy sy'n gysylltiedig â rheoli darllenwyr sgrin a thechnolegau cynorthwyol tebyg. Os yw'r elfen cwympadwy yn cael ei chau yn ddiofyn, dylai'r priodoledd ar yr elfen reoli fod â gwerth aria-expanded="false". Os ydych chi wedi gosod yr elfen cwympadwy i fod yn agored yn ddiofyn gan ddefnyddio'r showdosbarth, gosodwch aria-expanded="true"y rheolydd yn lle hynny. Bydd yr ategyn yn toglo'r nodwedd hon yn awtomatig ar y rheolydd yn seiliedig ar p'un a yw'r elfen cwympadwy wedi'i hagor neu ei chau ai peidio (trwy JavaScript, neu oherwydd bod y defnyddiwr wedi sbarduno elfen reoli arall hefyd yn gysylltiedig â'r un elfen cwympadwy). Os nad yw elfen HTML yr elfen reoli yn fotwm (ee, an <a>neu <div>), y priodoleddrole="button"dylid ei ychwanegu at yr elfen.

Os yw'ch elfen reoli yn targedu un elfen sy'n cwympo - hy mae'r data-targetbriodwedd yn pwyntio at idddetholwr - dylech ychwanegu'r aria-controlsbriodwedd at yr elfen reoli, sy'n cynnwys yr elfen sy'n idcwympo. Mae darllenwyr sgrin modern a thechnolegau cynorthwyol tebyg yn defnyddio'r nodwedd hon i ddarparu llwybrau byr ychwanegol i ddefnyddwyr lywio'n uniongyrchol i'r elfen gwympadwy ei hun.

Sylwch nad yw gweithrediad presennol Bootstrap yn cwmpasu'r rhyngweithiadau bysellfwrdd amrywiol a ddisgrifir ym mhatrwm acordion 1.1 Arferion Awduro WAI-ARIA - bydd angen i chi gynnwys y rhain eich hun gyda JavaScript wedi'i deilwra.

Defnydd

Mae'r ategyn cwympo yn defnyddio ychydig o ddosbarthiadau i drin y codi trwm:

  • .collapseyn cuddio'r cynnwys
  • .collapse.showyn dangos y cynnwys
  • .collapsingyn cael ei ychwanegu pan fydd y trawsnewid yn dechrau, a'i ddileu pan fydd yn gorffen

Gellir dod o hyd i'r dosbarthiadau hyn yn _transitions.scss.

Trwy briodoleddau data

Ychwanegwch data-toggle="collapse"ac a data-targetat yr elfen i neilltuo rheolaeth yn awtomatig ar un neu fwy o elfennau cwympadwy. Mae'r data-targetpriodoledd yn derbyn dewisydd CSS i gymhwyso'r cwymp iddo. Gwnewch yn siŵr eich bod chi'n ychwanegu'r dosbarth collapseat yr elfen gwympadwy. Os hoffech iddo agor diofyn, ychwanegwch y dosbarth ychwanegol show.

I ychwanegu rheolaeth grŵp tebyg i acordion at ardal sy'n cwympo, ychwanegwch y priodoledd data data-parent="#selector". Cyfeiriwch at y demo i weld hyn ar waith.

Trwy JavaScript

Galluogi â llaw gyda:

$('.collapse').collapse()

Opsiynau

Gellir trosglwyddo opsiynau trwy briodoleddau data neu JavaScript. Ar gyfer priodoleddau data, atodwch enw'r opsiwn i data-, fel yn data-parent="".

Enw Math Diofyn Disgrifiad
rhiant dewiswr | jQuery gwrthrych | elfen DOM ffug Os darperir rhiant, yna bydd yr holl elfennau cwympadwy o dan y rhiant penodedig yn cael eu cau pan ddangosir yr eitem hon y gellir ei dymchwel. (yn debyg i ymddygiad acordion traddodiadol - mae hyn yn dibynnu ar y carddosbarth). Mae'n rhaid gosod y priodoledd ar yr ardal darged lle gellir cwympo.
togl boolaidd gwir Toglo'r elfen cwympadwy ar alw

Dulliau

Dulliau a thrawsnewidiadau anghydamserol

Mae pob dull API yn asyncronaidd ac yn dechrau cyfnod pontio . Maen nhw'n dychwelyd at y galwr cyn gynted ag y bydd y cyfnod pontio wedi dechrau ond cyn iddo ddod i ben . Yn ogystal, bydd galwad dull ar gydran trawsnewid yn cael ei anwybyddu .

Gweler ein dogfennaeth JavaScript am ragor o wybodaeth.

.collapse(options)

Yn actifadu'ch cynnwys fel elfen y gellir ei dymchwel. Yn derbyn opsiwn dewisol object.

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

.collapse('toggle')

Toglo elfen sy'n cwympo i'w dangos neu ei chuddio. Yn dychwelyd i'r galwr cyn i'r elfen gwympo gael ei dangos neu ei chuddio (hy cyn i'r digwyddiad shown.bs.collapseneu'r hidden.bs.collapsedigwyddiad ddigwydd).

.collapse('show')

Yn dangos elfen sy'n cwympo. Yn dychwelyd i'r galwr cyn i'r elfen gwympo gael ei dangos (hy cyn i'r shown.bs.collapsedigwyddiad ddigwydd).

.collapse('hide')

Yn cuddio elfen sy'n cwympo. Yn dychwelyd i'r galwr cyn i'r elfen gwympo gael ei chuddio (hy cyn i'r hidden.bs.collapsedigwyddiad ddigwydd).

.collapse('dispose')

Yn dinistrio cwymp elfen.

Digwyddiadau

Mae dosbarth cwymp Bootstrap yn datgelu ychydig o ddigwyddiadau ar gyfer cysylltu â swyddogaeth cwympo.

Math o Ddigwyddiad Disgrifiad
llewyg.bs Mae'r digwyddiad hwn yn tanio ar unwaith pan showelwir y dull enghraifft.
dangos.bs.cwymp Mae'r digwyddiad hwn yn cael ei danio pan fydd elfen cwympo wedi'i gwneud yn weladwy i'r defnyddiwr (bydd yn aros i'r trawsnewidiadau CSS gael eu cwblhau).
cuddio.bs.cwymp Mae'r digwyddiad hwn yn cael ei danio ar unwaith pan fydd y hidedull wedi'i alw.
cudd.bs.cwymp Mae'r digwyddiad hwn yn cael ei danio pan fydd elfen cwymp wedi'i chuddio rhag y defnyddiwr (bydd yn aros i'r trawsnewidiadau CSS gael eu cwblhau). 
$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})