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 qiymatidan jonlantiriladi 0. CSS animatsiyalarni qanday boshqarishini hisobga olsak, siz elementdan foydalana paddingolmaysiz .collapse. Buning o'rniga, sinfni mustaqil o'rash elementi sifatida foydalaning.

Ushbu komponentning animatsiya effekti prefers-reduced-motionmedia so'roviga bog'liq. Maxsus imkoniyatlar hujjatlarimizning qisqartirilgan harakat bo'limiga qarang .

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.

href bilan bog'lanish

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

Birinchi elementni almashtirish

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. Akkordeon uslubiga to'g'ri erishish uchun, o'rash .accordionsifatida foydalanishni unutmang.

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.

<div class="accordion" id="accordionExample">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h2 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>
      </h2>
    </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">
      <h2 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>
      </h2>
    </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">
      <h2 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>
      </h2>
    </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 o'sha yig'iladigan elementga 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 `card`sinfga 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 `show`misol 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 `hide`usul 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...
})