Kolapsi

Ndryshoni dukshmërinë e përmbajtjes në projektin tuaj me disa klasa dhe shtojcat tona JavaScript.

Si punon

Shtojca e kolapsit JavaScript përdoret për të shfaqur dhe fshehur përmbajtjen. Butonat ose ankorat përdoren si shkas që janë të lidhur me elementë specifikë që ndërroni. Kolapsimi i një elementi do të animojë heightnga vlera e tij aktuale në 0. Duke pasur parasysh se si CSS trajton animacionet, nuk mund të përdorni paddingnë një .collapseelement. Në vend të kësaj, përdorni klasën si një element mbështjellës të pavarur.

Shembull

Klikoni butonat më poshtë për të shfaqur dhe fshehur një element tjetër nëpërmjet ndryshimeve të klasës:

• .collapsefsheh përmbajtjen
• .collapsingzbatohet gjatë tranzicionit
• .collapse.showtregon përmbajtjen

Në përgjithësi, ne rekomandojmë përdorimin e një butoni me data-targetatributin. Megjithëse nuk rekomandohet nga pikëpamja semantike, mund të përdorni gjithashtu një lidhje me hrefatributin (dhe a role="button"). Në të dyja rastet, data-toggle="collapse"kërkohet.

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

Horizontale

Shtojca e kolapsit gjithashtu mbështet kolapsin horizontal. Shtoni .widthklasën e modifikuesit për të kaluar në widthvend të heightdhe vendosni a widthnë elementin fëmijë të menjëhershëm. Mos ngurroni të shkruani Sass-in tuaj të personalizuar, të përdorni stilet inline ose të përdorni shërbimet tona të gjerësisë .

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

Objektiva të shumtë

A <button>ose <a>mund të shfaqë dhe fshehë elementë të shumtë duke i referuar me një përzgjedhës JQuery në atributin e tij hrefose . data-targetShumëfish <button>ose <a>mund të shfaqin dhe fshehin një element nëse secili e referon atë me atributin e tij hrefosedata-target

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

Shembull fizarmonikë

Duke përdorur komponentin e kartës , mund të zgjeroni sjelljen e paracaktuar të kolapsit për të krijuar një fizarmonikë. Për të arritur siç duhet stilin e fizarmonikës, sigurohuni që ta përdorni .accordionsi mbështjellës.

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

Aksesueshmëria

Sigurohuni që të shtoni aria-expandednë elementin e kontrollit. Ky atribut përcjell në mënyrë eksplicite gjendjen aktuale të elementit të palosshëm të lidhur me kontrollin e lexuesve të ekranit dhe teknologjive të ngjashme ndihmëse. Nëse elementi i palosshëm mbyllet si parazgjedhje, atributi në elementin e kontrollit duhet të ketë një vlerë prej aria-expanded="false". Nëse keni vendosur që elementi i palosshëm të jetë i hapur si parazgjedhje duke përdorur showklasën, vendoseni aria-expanded="true"në kontrollin në vend të kësaj. Shtojca do ta ndërrojë automatikisht këtë atribut në kontroll bazuar në faktin nëse elementi i palosshëm është hapur ose mbyllur (nëpërmjet JavaScript, ose sepse përdoruesi ka aktivizuar një element tjetër kontrolli të lidhur gjithashtu me të njëjtin element të palosshëm). Nëse elementi HTML i elementit të kontrollit nuk është një buton (p.sh., një <a>ose <div>), atributirole="button"duhet t'i shtohet elementit.

Nëse elementi juaj i kontrollit synon një element të vetëm të palosshëm – dmth. data-targetatributi drejton një idpërzgjedhës – duhet të shtoni aria-controlsatributin në elementin e kontrollit, që përmban idelementin e palosshëm. Lexuesit modernë të ekranit dhe teknologjitë e ngjashme ndihmëse përdorin këtë atribut për t'u ofruar përdoruesve shkurtore shtesë për të lundruar drejtpërdrejt te vetë elementi i palosshëm.

Vini re se zbatimi aktual i Bootstrap nuk mbulon ndërveprimet e ndryshme të tastierës të përshkruara në modelin e fizarmonikës së Udhëzuesit të Praktikave të Autorimit ARIA - do t'ju duhet t'i përfshini vetë këto me JavaScript të personalizuar.

Përdorimi

Shtojca e kolapsit përdor disa klasa për të trajtuar ngritjen e rëndë:

• .collapsefsheh përmbajtjen
• .collapse.showtregon përmbajtjen
• .collapsingshtohet kur fillon tranzicioni dhe hiqet kur përfundon

Këto klasa mund të gjenden në _transitions.scss.

Nëpërmjet atributeve të të dhënave

Thjesht shtoni data-toggle="collapse"dhe a data-targetnë element për të caktuar automatikisht kontrollin e një ose më shumë elementeve të palosshme. Atributi data-targetpranon një përzgjedhës CSS për të aplikuar kolapsin. Sigurohuni që të shtoni klasën collapsenë elementin e palosshëm. Nëse dëshironi që të hapet si parazgjedhje, shtoni klasën shtesë show.

Për të shtuar menaxhimin e grupit të ngjashëm me fizarmonikën në një zonë të palosshme, shtoni atributin e të dhënave data-parent="#selector". Referojuni demonstrimit për ta parë këtë në veprim.

Përmes JavaScript

Aktivizo manualisht me:

$('.collapse').collapse()

Opsione

Opsionet mund të kalohen nëpërmjet atributeve të të dhënave ose JavaScript. Për atributet e të dhënave, shtoni emrin e opsionit në data-, si në data-parent="".

Metodat

.collapse(options)

Aktivizon përmbajtjen tuaj si një element i palosshëm. Pranon një opsion opsional object.

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

.collapse('toggle')

Ndryshon një element të palosshëm në të shfaqur ose të fshehur. Kthehet te thirrësi përpara se elementi i palosshëm të jetë shfaqur ose fshehur (dmth. përpara se të ndodhë ngjarja shown.bs.collapseose ).hidden.bs.collapse

.collapse('show')

Tregon një element të palosshëm. Kthehet te thirrësi përpara se elementi i palosshëm të shfaqet (dmth. përpara se të shown.bs.collapsendodhë ngjarja).

.collapse('hide')

Fsheh një element të palosshëm. Kthehet te thirrësi përpara se elementi i palosshëm të jetë fshehur në të vërtetë (dmth. përpara se të hidden.bs.collapsendodhë ngjarja).

.collapse('dispose')

Shkatërron kolapsin e një elementi.

Ngjarjet

Klasa e kolapsit të Bootstrap ekspozon disa ngjarje për t'u lidhur me funksionalitetin e kolapsit.

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