Source

Kugwa

Sinthani kuwoneka kwa zomwe zili mu projekiti yanu ndi makalasi angapo ndi mapulagini athu a JavaScript.

Momwe zimagwirira ntchito

Pulogalamu yowonjezera ya JavaScript imagwiritsidwa ntchito kusonyeza ndi kubisa zomwe zili. Mabatani kapena nangula amagwiritsidwa ntchito ngati zoyambitsa zomwe zimajambulidwa kuzinthu zinazake zomwe mumasintha. Kugwetsa chinthu kumapangitsa kuti chinthucho heightchichoke pamtengo wake mpaka kufika 0. Poganizira momwe CSS imagwirira ntchito makanema ojambula, simungagwiritse ntchito paddingpa .collapsechinthu. M'malo mwake, gwiritsani ntchito kalasi ngati chinthu chomangirira chodziyimira pawokha.

Chitsanzo

Dinani mabatani omwe ali pansipa kuti muwonetse ndikubisa chinthu china kudzera mukusintha kwamakalasi:

  • .collapseamabisa zomwe zili
  • .collapsingimagwiritsidwa ntchito panthawi ya kusintha
  • .collapse.showzikuwonetsa zomwe zili

Mutha kugwiritsa ntchito ulalo wokhala ndi mawonekedwe href, kapena batani lokhala ndi tanthauzo data-target. Muzochitika zonsezi, data-toggle="collapse"ndikofunikira.

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>

Zolinga zingapo

A <button>kapena <a>atha kuwonetsa ndikubisa zinthu zingapo powalozera ndi chosankha cha JQuery mu zake hrefkapena mawonekedwe ake data-target. Angapo <button>kapena atha kuwonetsa <a>ndikubisa chinthu ngati aliyense amachitchula ndi mawonekedwe hrefakedata-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>

Chitsanzo cha accordion

Pogwiritsa ntchito chigawo cha khadi , mutha kukulitsa khalidwe la kugwa kosasintha kuti mupange accordion.

Pankhani ya cliche reprehenderit, enim eiusmod high life accsamamus terry richardson ad squid. 3 Wolf moon officia aute, non cupidatat skateboard dolor brunch. Zakudya zamagalimoto quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua kuika mbalame pa nyamayo sikwidi single-origin khofi nulla imaginenda shoreditch et. Nihil anim keffiyeh helvetica, ntchito ya mowa wa craft wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft craft famu-to-table, denim yaiwisi yokongoletsedwa ndi nesciunt mwina simunamvepo za iwo accusamus laboratory yokhazikika 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.
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>

Kufikika

Onetsetsani kuti muwonjezere aria-expandedku chinthu chowongolera. Chizindikirochi chikuwonetsa bwino momwe zinthu zomwe zimasokonekera zomwe zimalumikizidwa ndi zowongolera zowerengera zowonera ndi matekinoloje othandizira ofanana. Ngati chinthu chosokonekera chatsekedwa mwachisawawa, chikhumbo cha chinthu chowongolera chiyenera kukhala ndi mtengo wa aria-expanded="false". Ngati mwakhazikitsa chinthu chogonja kuti chitsegulidwe mwachisawawa pogwiritsa ntchito showkalasi, ikani aria-expanded="true"chowongolera m'malo mwake. Pulagiyi imangosintha izi poyang'anira kutengera ngati chinthu chomwe chitha kugwa chatsegulidwa kapena kutsekedwa (kudzera pa JavaScript, kapena chifukwa wogwiritsa ntchitoyo adayambitsa chinthu china chowongolera chomwe chimamangiriridwanso ku chinthu chomwecho). Ngati chinthu chowongolera cha HTML si batani (mwachitsanzo, <a>kapena <div>), mawonekedwerole="button"ziyenera kuwonjezeredwa ku element.

Ngati chinthu chomwe mumayang'anira chikuyang'ana chinthu chimodzi chomwe chimatha kugwa - mwachitsanzo, mawonekedwewo data-targetakulozera kwa idchosankha - muyenera kuwonjezera chizindikiritso aria-controlsku chinthu chowongolera, chomwe chili ndi idchinthu chomwe chimatha kugwa. Owerenga zenera amakono ndi matekinoloje othandizira ofanana amagwiritsa ntchito izi kuti apatse ogwiritsa ntchito njira zazifupi kuti ayende molunjika ku chinthu chomwe chimasokonekera chokha.

Dziwani kuti kukhazikitsa kwa Bootstrap pakadali pano sikukhudzana ndi machitidwe osiyanasiyana a kiyibodi ofotokozedwa mu WAI-ARIA Authoring Practices 1.1 accordion pattern - muyenera kuziphatikiza ndi JavaScript yokhazikika.

Kugwiritsa ntchito

Pulagi ya kugwa imagwiritsa ntchito makalasi angapo kuti athe kunyamula zolemetsa:

  • .collapseamabisa zomwe zili
  • .collapse.showzikuwonetsa zomwe zili
  • .collapsingimawonjezeredwa pamene kusintha kukuyamba, ndikuchotsedwa ikatha

Maphunzirowa amapezeka mu _transitions.scss.

Kudzera muzochita za data

Ingowonjezerani data-toggle="collapse"ndi a data-targetku chinthucho kuti muzitha kuwongolera chinthu chimodzi kapena zingapo zomwe zimatha kutha. Malingaliro data-targetamavomereza chosankha cha CSS kuti agwiritse ntchito kugwa. Onetsetsani kuti mwawonjezera kalasi collapseku chinthu chomwe chimatha. Ngati mukufuna kuti isatseguke, onjezani kalasi yowonjezera show.

Kuti muwonjeze kasamalidwe ka gulu ngati accordion kumalo otha kugwa, onjezani mawonekedwe a data data-parent="#selector". Onani pachiwonetsero kuti muwone izi zikugwira ntchito.

Kudzera pa JavaScript

Yambitsani pamanja ndi:

$('.collapse').collapse()

Zosankha

Zosankha zitha kuperekedwa kudzera pa data kapena JavaScript. Pamawonekedwe a data, yonjezerani dzina lachisankho ku data-, monga mu data-parent="".

Dzina Mtundu Zosasintha Kufotokozera
kholo kusankha | jQuery chinthu | Chithunzi cha DOM zabodza Ngati kholo liperekedwa, ndiye kuti zinthu zonse zomwe zimasokonekera pansi pa khololo zidzatsekedwa chinthu chosokonekerachi chiwonetsedwa. (zofanana ndi chikhalidwe cha accordion - izi zimadalira cardkalasi). Chikhalidwecho chiyenera kukhazikitsidwa pa malo omwe angagwe.
kusintha boolean zoona Imasintha chinthu chomwe chimasokonekera pakuyitanitsa

Njira

Asynchronous njira ndi kusintha

Njira zonse za API ndizosasinthika ndipo zimayamba kusintha . Amabwerera kwa woyimbayo atangoyamba kusintha koma asanathe . Kuonjezera apo, kuyitana kwa njira pa gawo losintha kudzanyalanyazidwa .

Onani zolemba zathu za JavaScript kuti mudziwe zambiri.

.collapse(options)

Imatsegula zomwe zili patsamba lanu ngati chinthu chosokonekera. Imavomereza zomwe mungachite object.

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

.collapse('toggle')

Imasintha zinthu zomwe zimagundika kuti ziwonetsedwe kapena zobisika. Imabwereranso kwa woyimbayo chinthu chomwe chingathe kutha sichinasonyezedwe kapena kubisika (ie chisanachitike shown.bs.collapsekapena hidden.bs.collapsechochitikacho).

.collapse('show')

Imawonetsa chinthu chomwe chimatha kutha. Imabwereranso kwa woyimbayo chinthu chomwe chingathe kugwetsedwa chisanasonyezedwe (mwachitsanzo, shown.bs.collapsechochitikacho chisanachitike).

.collapse('hide')

Imabisa chinthu chomwe chimatha kutha. Imabwereranso kwa woyimbirayo chinthu chomwe chingathe kutha sichinabisike (mwachitsanzo, hidden.bs.collapsechochitikacho chisanachitike).

.collapse('dispose')

Imawononga kugwa kwa chinthu.

Zochitika

Gulu la kugwa la Bootstrap likuwonetsa zochitika zingapo zokokera pakugwa.

Mtundu wa Chochitika Kufotokozera
onetsani.bs.kugwa Chochitika ichi chimayaka nthawi yomweyo shownjira yachitsanzo itayitanidwa.
zowonetsedwa.bs.kugwa Chochitikachi chimachotsedwa pomwe chinthu chakugwa chawonetsedwa kwa wogwiritsa ntchito (chidikirira kuti kusintha kwa CSS kumalize).
kubisa.bs.gwa Chochitikachi chimathamangitsidwa nthawi yomweyo hidenjirayo itayitanidwa.
zobisika.bs.kugwa Chochitikachi chimachotsedwa pomwe chinthu chakugwa chabisidwa kwa wogwiritsa ntchito (chidikirira kuti kusintha kwa CSS kumalize). 
$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})