Přejít na hlavní obsah Přejít na navigaci v dokumentech
in English

Kolaps

Přepínejte viditelnost obsahu ve svém projektu pomocí několika tříd a našich pluginů JavaScript.

Jak to funguje

Plugin JavaScript pro sbalení se používá k zobrazení a skrytí obsahu. Tlačítka nebo kotvy se používají jako spouštěče, které jsou mapovány na konkrétní prvky, které přepínáte. Sbalením prvku dojde k animaci prvku heightz jeho aktuální hodnoty na 0. Vzhledem k tomu, jak CSS zpracovává animace, nemůžete použít paddingna .collapseprvek. Místo toho použijte třídu jako nezávislý prvek obtékání.

Efekt animace této komponenty závisí na prefers-reduced-motiondotazu na média. Podívejte se na část s omezeným pohybem v naší dokumentaci přístupnosti .

Příklad

Kliknutím na tlačítka níže zobrazíte a skryjete další prvek prostřednictvím změn třídy:

  • .collapseskrývá obsah
  • .collapsingse aplikuje při přechodech
  • .collapse.showzobrazuje obsah

Obecně doporučujeme použít tlačítko s data-bs-targetatributem. I když se to ze sémantického hlediska nedoporučuje, můžete také použít odkaz s hrefatributem (a role="button"). V obou případech data-bs-toggle="collapse"je požadováno.

Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
<p>
  <a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  </a>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Button with data-bs-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>

Více cílů

A <button>nebo <a>může zobrazit a skrýt více prvků odkazem na ně pomocí selektoru ve svém atributu hrefnebo . data-bs-targetVíce prvků <button>nebo <a>mohou zobrazit a skrýt prvek, pokud na něj každý odkazuje svým atributem hrefnebo data-bs-targetatributem

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.
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.
<p>
  <a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-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>

Přístupnost

Nezapomeňte přidat aria-expandeddo ovládacího prvku. Tento atribut explicitně vyjadřuje aktuální stav skládacího prvku spojeného s ovládacím prvkem pro čtečky obrazovky a podobné asistenční technologie. Pokud je sbalitelný prvek ve výchozím nastavení uzavřen, měl by mít atribut ovládacího prvku hodnotu aria-expanded="false". Pokud jste sbalitelný prvek nastavili jako výchozí otevřený pomocí showtřídy, nastavte aria-expanded="true"místo toho na ovládacím prvku. Plugin automaticky přepne tento atribut na ovládacím prvku na základě toho, zda byl nebo nebyl sbalitelný prvek otevřen nebo zavřen (prostřednictvím JavaScriptu nebo protože uživatel spustil jiný ovládací prvek také spojený se stejným skládacím prvkem). Pokud prvek HTML ovládacího prvku není tlačítko (např. <a>nebo <div>), atributrole="button"by měl být přidán k prvku.

Pokud váš ovládací prvek cílí na jeden skládací prvek – tj. data-bs-targetatribut ukazuje na idselektor – měli byste přidat aria-controlsatribut k ovládacímu prvku, který obsahuje idprvek skládacího prvku. Moderní čtečky obrazovky a podobné asistenční technologie využívají tohoto atributu k tomu, aby uživatelům poskytly další zkratky pro přímou navigaci k samotnému skládacímu prvku.

Všimněte si, že současná implementace Bootstrapu nepokrývá různé volitelné interakce s klávesnicí popsané ve vzoru akordeonu WAI-ARIA Authoring Practices 1.1 – budete je muset sami zahrnout do vlastního JavaScriptu.

Sass

Proměnné

$transition-collapse:         height .35s ease;

Třídy

Přechodové třídy sbalení lze nalézt v scss/_transitions.scss, protože jsou sdíleny mezi více komponentami (sbalení a akordeon).

.collapse {
  &:not(.show) {
    display: none;
  }
}

.collapsing {
  height: 0;
  overflow: hidden;
  @include transition($transition-collapse);
}

Používání

Zásuvný modul pro kolaps využívá několik tříd ke zvládnutí těžkého zvedání:

  • .collapseskryje obsah
  • .collapse.showukazuje obsah
  • .collapsingse přidá při zahájení přechodu a odebere se po jeho dokončení

Tyto třídy lze nalézt v _transitions.scss.

Prostřednictvím datových atributů

Stačí přidat data-bs-toggle="collapse"a data-bs-targetk prvku a automaticky přiřadit ovládání jednoho nebo více skládacích prvků. Atribut data-bs-targetpřijímá selektor CSS, na který se má sbalení použít. Nezapomeňte přidat třídu collapsedo skládacího prvku. Pokud chcete, aby se ve výchozím nastavení otevřela, přidejte další třídu show.

Chcete-li do sbalitelné oblasti přidat správu skupiny podobnou akordeonu, přidejte atribut data data-bs-parent="#selector". Podívejte se na ukázku, abyste to viděli v akci.

Prostřednictvím JavaScriptu

Povolit ručně pomocí:

var collapseElementList = [].slice.call(document.querySelectorAll('.collapse'))
var collapseList = collapseElementList.map(function (collapseEl) {
  return new bootstrap.Collapse(collapseEl)
})

Možnosti

Možnosti lze předávat prostřednictvím atributů dat nebo JavaScriptu. U atributů dat připojte název volby k data-bs-, jako v data-bs-parent="".

název Typ Výchozí Popis
parent volič | objekt jQuery | prvek DOM false Pokud je zadán nadřazený prvek, všechny skládací prvky pod zadaným nadřazeným prvkem se při zobrazení této sbalitelné položky uzavřou. (podobné tradičnímu chování na akordeonu - to závisí na cardtřídě). Atribut musí být nastaven na cílové skládací oblasti.
toggle booleovský true Přepíná sbalitelný prvek při vyvolání

Metody

Asynchronní metody a přechody

Všechny metody API jsou asynchronní a zahajují přechod . Vrátí se k volajícímu, jakmile je přechod zahájen, ale ještě před jeho ukončením . Kromě toho bude ignorováno volání metody na přechodové komponentě .

Další informace naleznete v naší dokumentaci k JavaScriptu .

Aktivuje váš obsah jako sbalitelný prvek. Přijímá volitelné možnosti object.

Instanci sbalení můžete vytvořit pomocí konstruktoru, například:

var myCollapse = document.getElementById('myCollapse')
var bsCollapse = new bootstrap.Collapse(myCollapse, {
  toggle: false
})
Metoda Popis
toggle Přepne sbalitelný prvek na zobrazený nebo skrytý. Vrátí se k volajícímu dříve, než byl skládací prvek skutečně zobrazen nebo skryt (tj. než dojde k události shown.bs.collapsenebo ).hidden.bs.collapse
show Zobrazuje skládací prvek. Vrátí se k volajícímu dříve, než byl skládací prvek skutečně zobrazen (např. předtím, než dojde k shown.bs.collapseudálosti).
hide Skrývá skládací prvek. Vrátí se k volajícímu dříve, než byl skládací prvek skutečně skryt (např. předtím, než dojde k hidden.bs.collapseudálosti).
dispose Zničí kolaps prvku. (Odstraní uložená data v prvku DOM)
getInstance Statická metoda, která vám umožňuje získat instanci sbalení přidruženou k prvku DOM, můžete ji použít takto:bootstrap.Collapse.getInstance(element)
getOrCreateInstance Statická metoda, která vrátí instanci sbalení přidruženou k prvku DOM nebo vytvoří novou v případě, že nebyla inicializována. Můžete jej použít takto:bootstrap.Collapse.getOrCreateInstance(element)

Události

Třída sbalení Bootstrapu odhaluje několik událostí pro zapojení do funkce sbalení.

Typ události Popis
show.bs.collapse Tato událost se spustí okamžitě při showvolání metody instance.
shown.bs.collapse Tato událost se spustí, když je prvek sbalení viditelný pro uživatele (bude čekat na dokončení přechodů CSS).
hide.bs.collapse Tato událost se spustí okamžitě po hidezavolání metody.
hidden.bs.collapse Tato událost se spustí, když byl prvek sbalení skrytý před uživatelem (bude čekat na dokončení přechodů CSS).
var myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', function () {
  // do something...
})