Source

Yiqilish

Bir nechta sinflar va JavaScript plaginlarimiz yordamida loyihangiz boʻylab kontentning koʻrinishini oʻzgartiring.

U qanday ishlaydi

Collapse JavaScript plagini kontentni ko'rsatish va yashirish uchun ishlatiladi. Tugmalar yoki langarlar siz almashtiradigan muayyan elementlarga moslashtirilgan trigger sifatida ishlatiladi. Elementni yig'ish heightjoriy qiymatdan jonlantiriladi 0. CSS animatsiyalarni qanday boshqarishini hisobga olsak, siz elementdan foydalana paddingolmaysiz .collapse. Buning o'rniga, sinfni mustaqil o'rash elementi sifatida foydalaning.

Misol

Sinf o'zgarishlari orqali boshqa elementni ko'rsatish va yashirish uchun quyidagi tugmalarni bosing:

  • .collapsemazmunini yashiradi
  • .collapsingo'tish paytida qo'llaniladi
  • .collapse.showmazmunini ko‘rsatadi

Siz atributli havoladan hrefyoki atributli tugmachadan foydalanishingiz mumkin data-target. Ikkala holatda data-toggle="collapse"ham talab qilinadi.

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>

Bir nechta maqsadlar

A <button>yoki <a>bir nechta elementlarni JQuery selektori hrefyoki data-targetatributiga havola qilish orqali ko'rsatishi va yashirishi mumkin. Bir nechta <button>yoki <a>elementni ko'rsatishi va yashirishi mumkin, agar ularning har biri unga o'z atributi bilan hrefmurojaat data-targetqilsa

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>

Akkordeon misoli

Karta komponentidan foydalanib , siz akkordeon yaratish uchun sukut bo'yicha siqilish harakatini kengaytirishingiz mumkin.

Anim pariatur cliche reprehenderit, enim eiusmod yuqori hayot uchun Terri Richardson va kalamar uchun. 3 bo'ri oy officia aute, non cupidatat skeytbord dolor brunch. Oziq-ovqat yuk mashinasi quinoa nesciunt laborum eiusmod. Brunch 3 bo'ri oy tempor, sunt aliqua unga bir qush qo'yish kalamar bir kelib chiqishi kofe nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft pivo ishchisi Wes Anderson cred nesciunt sapiente ea proident. Ad vegan excepteur qassob vitse lomo. Leggings occaecat craft pivo farm-to-stol, raw denim estetik synth nesciunt siz ular haqida eshitmagan bo'lsangiz kerak accusamus labore barqaror 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>

Foydalanish imkoniyati

aria-expandedBoshqaruv elementiga qo'shishni unutmang . Bu atribut boshqaruvga bogʻlangan yigʻiladigan elementning joriy holatini ekranni oʻqish moslamalariga va shunga oʻxshash yordamchi texnologiyalarga aniq etkazadi. Agar yig'iladigan element sukut bo'yicha yopilgan bo'lsa, boshqaruv elementidagi atribut qiymati ga ega bo'lishi kerak aria-expanded="false". Agar siz yig'iladigan elementni showsinfdan foydalanib, sukut bo'yicha ochiq qilib qo'ygan bo'lsangiz, aria-expanded="true"uning o'rniga boshqaruvni o'rnating. Plagin yig'iladigan element ochilgan yoki yopilmaganligiga (JavaScript orqali yoki foydalanuvchi bir xil yig'ish elementiga bog'langan boshqa boshqaruv elementini ishga tushirgani uchun) avtomatik ravishda boshqaruv elementida ushbu atributni almashtiradi. Agar boshqaruv elementining HTML elementi tugma bo'lmasa (masalan, <a>yoki <div>), atributrole="button"elementga qo'shilishi kerak.

Agar sizning boshqaruv elementingiz bitta yig'iladigan elementga mo'ljallangan bo'lsa, ya'ni atribut selektorga data-targetishora qilsa - siz yig'iladigan elementni o'z ichiga olgan boshqaruv elementiga atributni qo'shishingiz kerak . Zamonaviy ekran o'quvchilari va shunga o'xshash yordamchi texnologiyalar foydalanuvchilarga to'g'ridan-to'g'ri yig'iladigan elementga o'tish uchun qo'shimcha yorliqlar bilan ta'minlash uchun ushbu atributdan foydalanadi.idaria-controlsid

E'tibor bering, Bootstrap-ning joriy ilovasi WAI-ARIA Authoring Practices 1.1 akkordeon naqshida tasvirlangan turli xil klaviatura o'zaro ta'sirlarini qamrab olmaydi - ularni o'zingiz uchun maxsus JavaScript-ga qo'shishingiz kerak bo'ladi.

Foydalanish

Yiqilish plagini og'ir yuklarni ko'tarish uchun bir nechta sinflardan foydalanadi:

  • .collapsemazmunini yashiradi
  • .collapse.showmazmunini ko‘rsatadi
  • .collapsingo'tish boshlanganda qo'shiladi va tugashi bilan o'chiriladi

Ushbu sinflarni quyidagi manzilda topish mumkin _transitions.scss.

Ma'lumotlar atributlari orqali

Bir yoki bir nechta yig'iladigan elementlarning boshqaruvini avtomatik belgilash uchun elementga data-toggle="collapse"va a qo'shing . data-targetAtribut data-targetsiqishni qo'llash uchun CSS selektorini qabul qiladi. collapseSinfni yig'iladigan elementga qo'shganingizga ishonch hosil qiling . Agar siz uni sukut bo'yicha ochishni istasangiz, qo'shimcha sinfni qo'shing show.

Akkordeonga o'xshash guruh boshqaruvini yig'iladigan maydonga qo'shish uchun ma'lumotlar atributini qo'shing data-parent="#selector". Buni amalda ko'rish uchun demoga qarang.

JavaScript orqali

Qo'lda yoqish:

$('.collapse').collapse()

Variantlar

Variantlar ma'lumotlar atributlari yoki JavaScript orqali uzatilishi mumkin. Maʼlumotlar atributlari uchun opsiya nomini quyidagi data-kabi qoʻshing data-parent="".

Ism Turi Standart Tavsif
ota-ona selektor | jQuery obyekti | DOM elementi yolg'on Agar ota-ona ko'rsatilgan bo'lsa, ushbu yig'iladigan element ko'rsatilganda ko'rsatilgan ota-ona ostidagi barcha yig'iladigan elementlar yopiladi. (an'anaviy akkordeon xatti-harakatiga o'xshash - bu cardsinfga bog'liq). Atribut maqsadli yig'iladigan maydonga o'rnatilishi kerak.
almashtirish mantiqiy rost Chaqiruvda yig'iladigan elementni almashtiradi

Usullari

Asinxron usullar va o'tishlar

Barcha API usullari asenkron va o'tishni boshlaydi . O'tish boshlanishi bilanoq, lekin tugashidan oldin ular qo'ng'iroq qiluvchiga qaytadilar . Bundan tashqari, o'tish komponentidagi usul chaqiruvi e'tiborga olinmaydi .

Qo'shimcha ma'lumot olish uchun bizning JavaScript hujjatlariga qarang.

.collapse(options)

Kontentingizni yig'iladigan element sifatida faollashtiradi. Ixtiyoriy variantlarni qabul qiladi object.

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

.collapse('toggle')

Yigʻiladigan elementni koʻrsatish yoki berkitishga almashtiradi. Yig'iladigan element haqiqatda ko'rsatilishi yoki yashirilishidan oldin (ya'ni yoki hodisa sodir bo'lishidan oldin) qo'ng'iroq qiluvchiga qaytadi .shown.bs.collapsehidden.bs.collapse

.collapse('show')

Yig'iladigan elementni ko'rsatadi. Yig'ib olinadigan element haqiqatda ko'rsatilishidan oldin (ya'ni, voqea sodir bo'lishidan oldin) qo'ng'iroq qiluvchiga qaytadi .shown.bs.collapse

.collapse('hide')

Yig'iladigan elementni yashiradi. Yig'ib olinadigan element haqiqatda yashirilgunga qadar (ya'ni voqea sodir bo'lishidan oldin) qo'ng'iroq qiluvchiga qaytadi .hidden.bs.collapse

.collapse('dispose')

Elementning qulashini yo'q qiladi.

Voqealar

Bootstrap ning qulash klassi qulash funksiyasiga ulanish uchun bir nechta hodisalarni ochib beradi.

Tadbir turi Tavsif
show.bs.collapse Ushbu hodisa showmisol usuli chaqirilganda darhol ishga tushadi.
ko'rsatilgan.bs.qulash Ushbu hodisa yig'ish elementi foydalanuvchiga ko'rinadigan bo'lsa, ishga tushiriladi (CSS o'tishlari tugashini kutadi).
yashirish.bs.qulash Ushbu hodisa hideusul chaqirilgandan so'ng darhol o'chiriladi.
yashirin.bs.qulash Ushbu hodisa siqilish elementi foydalanuvchidan yashirilganda ishga tushiriladi (CSS o'tishlari tugashini kutadi). 
$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})