Source

Sutraukti

Perjunkite projekto turinio matomumą naudodami kelias klases ir „JavaScript“ papildinius.

Kaip tai veikia

Sutraukti JavaScript įskiepis naudojamas turiniui rodyti ir slėpti. Mygtukai arba inkarai naudojami kaip aktyvikliai, susieti su konkrečiais jūsų perjungiamais elementais. Sutraukus elementą, heightjo dabartinė vertė bus animuota į 0. Atsižvelgiant į tai, kaip CSS apdoroja animacijas, negalite naudoti paddingelemento .collapse. Vietoj to naudokite klasę kaip nepriklausomą vyniojimo elementą.

Pavyzdys

Spustelėkite toliau pateiktus mygtukus, kad peržiūrint klasę būtų rodomas ir paslėptas kitas elementas:

  • .collapseslepia turinį
  • .collapsingtaikomas perėjimų metu
  • .collapse.showrodo turinį

Galite naudoti nuorodą su hrefatributu arba mygtuką su data-targetatributu. Abiem atvejais data-toggle="collapse"būtina.

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>

Keli taikiniai

A <button>arba <a>gali rodyti ir slėpti kelis elementus, nurodydami juos naudodami JQuery parinkiklį savo hrefar data-targetatribute. Keli <button>arba <a>gali rodyti ir slėpti elementą, jei kiekvienas nurodo jį savo hrefarba data-targetatributu

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>

Akordeono pavyzdys

Naudodami kortelės komponentą galite išplėsti numatytąjį sutraukimo veiksmą, kad sukurtumėte akordeoną.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad kalmarai. 3 wolf moon officia aute, non cupidatat skateboard dolor priešpiečiai. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua įdėti paukštį ant jo kalmaras vienos kilmės kava nulla guessnda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Reklama vegan, išskyrus mėsininką, vice lomo. Antblauzdžiai occaecat craft beer nuo fermos iki stalo, neapdoroto džinsinio audinio estetinis sintezatorius, tikriausiai negirdėjote apie juos accusamus labore tvarios 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>

Prieinamumas

Būtinai pridėkite aria-expandedprie valdymo elemento. Šis atributas aiškiai perteikia esamą sutraukiamo elemento, susieto su valdikliu, būseną ekrano skaitytuvams ir panašioms pagalbinėms technologijoms. Jei sutraukiamas elementas uždarytas pagal numatytuosius nustatymus, valdymo elemento atributo vertė turi būti aria-expanded="false". Jei naudodami showklasę nustatėte, kad sutraukiamasis elementas būtų atidarytas pagal numatytuosius nustatymus, aria-expanded="true"vietoj jo nustatykite valdiklį. Papildinys automatiškai perjungs šį valdiklio atributą, atsižvelgdamas į tai, ar sutraukiamas elementas buvo atidarytas ar uždarytas (naudojant „JavaScript“ arba dėl to, kad vartotojas suaktyvino kitą valdymo elementą, taip pat susietą su tuo pačiu sutraukiamu elementu). Jei valdymo elemento HTML elementas nėra mygtukas (pvz., <a>arba <div>), atributasrole="button"reikia pridėti prie elemento.

Jei jūsų valdymo elementas taikomas vienam sutraukiamam elementui – ty data-targetatributas nurodo idparinkiklį – turėtumėte pridėti aria-controlsatributą prie valdymo elemento, kuriame yra idsutraukiamas elementas. Šiuolaikiniai ekrano skaitytuvai ir panašios pagalbinės technologijos naudoja šį atributą, kad suteiktų vartotojams papildomų sparčiųjų klavišų, leidžiančių tiesiogiai pereiti prie paties sutraukiamo elemento.

Atminkite, kad dabartinis „Bootstrap“ diegimas neapima įvairių klaviatūros sąveikų, aprašytų WAI-ARIA Authoring Practices 1.1 akordeono šablone – jas turėsite įtraukti patys naudodami tinkintą „JavaScript“.

Naudojimas

Sutraukimo papildinys naudoja keletą klasių, kad galėtų susidoroti su sunkiu kėlimu:

  • .collapseslepia turinį
  • .collapse.showrodo turinį
  • .collapsingpridedamas, kai prasideda perėjimas, ir pašalinamas, kai jis baigiasi

Šias klases galima rasti _transitions.scss.

Per duomenų atributus

Tiesiog pridėkite data-toggle="collapse"ir a data-targetprie elemento, kad automatiškai priskirtumėte vieno ar daugiau sutraukiamų elementų valdymą. data-targetAtributas priima CSS parinkiklį, kuriam taikomas sutraukimas . Būtinai pridėkite klasę collapseprie sutraukiamo elemento. Jei norite, kad jis būtų atidarytas pagal numatytuosius nustatymus, pridėkite papildomą klasę show.

Norėdami įtraukti į akordeoną panašų grupės valdymą sutraukiamoje srityje, pridėkite duomenų atributą data-parent="#selector". Norėdami pamatyti, kaip tai veikia, žr. demonstracinę versiją.

Per JavaScript

Įgalinti rankiniu būdu su:

$('.collapse').collapse()

Galimybės

Parinktys gali būti perduodamos naudojant duomenų atributus arba JavaScript. Duomenų atributams pridėkite parinkties pavadinimą prie data-, kaip ir data-parent="".

vardas Tipas Numatytas apibūdinimas
tėvas parinkiklis | jQuery objektas | DOM elementas klaidinga Jei pateikiamas pirminis elementas, visi sutraukiami elementai po nurodyto pirminio elemento bus uždaryti, kai bus parodytas šis sutraukiamas elementas. (panašus į tradicinį akordeono elgesį – tai priklauso nuo cardklasės). Atributas turi būti nustatytas tikslinėje sutraukiamoje srityje.
perjungti loginis tiesa Perjungia sutraukiamą elementą iškvietimo metu

Metodai

Asinchroniniai metodai ir perėjimai

Visi API metodai yra asinchroniniai ir pradeda perėjimą . Jie grįžta pas skambinantįjį, kai tik prasideda perėjimas, bet jam nepasibaigus . Be to, pereinamojo komponento metodo iškvietimas bus ignoruojamas .

Daugiau informacijos rasite „JavaScript“ dokumentacijoje.

.collapse(options)

Suaktyvina turinį kaip sulankstomą elementą. Priima pasirenkamas parinktis object.

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

.collapse('toggle')

Perjungia sutraukiamą elementą į rodomą arba paslėptą. Grįžta į skambinantįjį, kol sutraukiamas elementas iš tikrųjų nebuvo parodytas arba paslėptas (ty prieš įvykstant shown.bs.collapsearba hidden.bs.collapseįvykiui).

.collapse('show')

Rodo sulankstomą elementą. Grįžta į skambinantįjį, kol iš tikrųjų nebuvo parodytas sutraukiamas elementas (ty prieš shown.bs.collapseįvykį).

.collapse('hide')

Paslepia sulankstomą elementą. Grįžta į skambinantįjį, kol sutraukiamas elementas iš tikrųjų buvo paslėptas (ty prieš hidden.bs.collapseįvykį).

.collapse('dispose')

Sunaikina elemento žlugimą.

Renginiai

„Bootstrap“ sutraukimo klasė atskleidžia keletą įvykių, kad būtų galima prisijungti prie sutraukimo funkcijos.

Renginio tipas apibūdinimas
parodyti.bs.griūti Šis įvykis suaktyvinamas iš karto, kai showiškviečiamas egzemplioriaus metodas.
parodyta.bs.griūtis Šis įvykis suaktyvinamas, kai sutraukimo elementas tampa matomas vartotojui (lauks, kol bus baigti CSS perėjimai).
paslėpti.bs.griūti Šis įvykis suaktyvinamas iš karto, kai hideiškviečiamas metodas.
paslėptas.bs.griūti Šis įvykis suaktyvinamas, kai sutraukimo elementas buvo paslėptas nuo vartotojo (lauks, kol bus baigti CSS perėjimai). 
$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})