Upadek
Przełącz widoczność treści w całym projekcie za pomocą kilku klas i naszych wtyczek JavaScript.
Jak to działa
Wtyczka scalania JavaScript służy do pokazywania i ukrywania treści. Przyciski lub kotwice są używane jako wyzwalacze, które są mapowane na określone elementy, które przełączasz. Zwinięcie elementu spowoduje animację height
z jego bieżącej wartości do 0
. Biorąc pod uwagę, jak CSS obsługuje animacje, nie możesz użyć padding
na .collapse
elemencie. Zamiast tego użyj klasy jako niezależnego elementu opakowującego.
prefers-reduced-motion
zapytania o media. Zobacz
zmniejszoną sekcję ruchu w naszej dokumentacji ułatwień dostępu .
Przykład
Kliknij poniższe przyciski, aby pokazać i ukryć inny element poprzez zmiany klasy:
.collapse
ukrywa treść.collapsing
jest stosowany podczas przejść.collapse.show
pokazuje treść
Generalnie zalecamy używanie przycisku z data-target
atrybutem. Chociaż nie jest to zalecane z semantycznego punktu widzenia, możesz również użyć linku z href
atrybutem (i role="button"
). W obu przypadkach data-toggle="collapse"
jest to wymagane.
<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>
Poziomy
Wtyczka zwijania obsługuje również zwijanie w poziomie. Dodaj .width
klasę modyfikatora do przejścia width
zamiast height
i ustaw a width
na bezpośrednim elemencie podrzędnym. Zachęcamy do napisania własnego niestandardowego Sassa, używania stylów wbudowanych lub korzystania z naszych narzędzi szerokości .
min-height
zestaw, aby uniknąć nadmiernego odświeżania w naszych dokumentach, nie jest to wyraźnie wymagane.
Wymagany jest tylko width
element podrzędny.
<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>
Wiele celów
A <button>
lub <a>
może pokazywać i ukrywać wiele elementów, odwołując się do nich za pomocą selektora JQuery w atrybucie href
lub . data-target
Wiele <button>
lub <a>
może pokazywać i ukrywać element, jeśli każdy z nich odwołuje się do niego za pomocą swojego atrybutu href
lubdata-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>
Przykład akordeonu
Używając komponentu karty , możesz rozszerzyć domyślne zachowanie zwijania, aby utworzyć akordeon. Aby prawidłowo osiągnąć styl akordeonu, użyj go .accordion
jako opakowania.
.show
klasie.
<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>
Dostępność
Pamiętaj, aby dodać aria-expanded
do elementu kontrolnego. Ten atrybut jawnie przekazuje bieżący stan zwijanego elementu powiązanego z kontrolką z czytnikami ekranu i podobnymi technologiami pomocniczymi. Jeśli zwijany element jest domyślnie zamknięty, atrybut elementu sterującego powinien mieć wartość aria-expanded="false"
. Jeśli ustawisz zwijany element, aby był domyślnie otwarty przy użyciu show
klasy, aria-expanded="true"
zamiast tego ustaw kontrolkę. Wtyczka automatycznie przełączy ten atrybut w kontrolce na podstawie tego, czy zwijalny element został otwarty lub zamknięty (za pomocą JavaScript lub ponieważ użytkownik wyzwolił inny element sterujący również powiązany z tym samym zwijanym elementem). Jeśli element HTML elementu kontrolnego nie jest przyciskiem (np. an <a>
lub <div>
), atrybutrole="button"
należy dodać do elementu.
Jeśli Twój element kontrolny jest skierowany na pojedynczy zwijalny element – tj. data-target
atrybut wskazuje na id
selektor – powinieneś dodać aria-controls
atrybut do elementu kontrolnego zawierającego id
element zwijalny. Nowoczesne czytniki ekranu i podobne technologie pomocnicze wykorzystują ten atrybut, aby zapewnić użytkownikom dodatkowe skróty umożliwiające nawigację bezpośrednio do samego zwijanego elementu.
Zwróć uwagę, że obecna implementacja Bootstrap nie obejmuje różnych interakcji z klawiaturą opisanych we wzorcu akordeonowym ARIA Authoring Practices Guide — musisz je dołączyć samodzielnie w niestandardowym JavaScript.
Stosowanie
Wtyczka zwijania wykorzystuje kilka klas do obsługi podnoszenia ciężkich przedmiotów:
.collapse
ukrywa treść.collapse.show
pokazuje treść.collapsing
jest dodawany po rozpoczęciu przejścia i usuwany po jego zakończeniu
Klasy te można znaleźć w _transitions.scss
.
Poprzez atrybuty danych
Wystarczy dodać data-toggle="collapse"
i a data-target
do elementu, aby automatycznie przypisać kontrolę nad jednym lub większą liczbą zwijanych elementów. data-target
Atrybut akceptuje selektor CSS, do którego ma zostać zastosowane zwinięcie . Pamiętaj, aby dodać klasę collapse
do zwijanego elementu. Jeśli chcesz, aby była domyślnie otwarta, dodaj dodatkowe zajęcia show
.
Aby dodać zarządzanie grupami w stylu harmonijki do zwijanego obszaru, dodaj atrybut data data-parent="#selector"
. Zapoznaj się z demo, aby zobaczyć to w akcji.
Przez JavaScript
Włącz ręcznie za pomocą:
$('.collapse').collapse()
Opcje
Opcje można przekazywać za pomocą atrybutów danych lub kodu JavaScript. W przypadku atrybutów danych dołącz nazwę opcji do data-
, jak w data-parent=""
.
Nazwa | Rodzaj | Domyślna | Opis |
---|---|---|---|
rodzic | selektor | jQuery obiekt | element DOM | fałszywy | Jeśli podano element nadrzędny, wszystkie zwijalne elementy pod określonym elementem nadrzędnym zostaną zamknięte, gdy ten zwijalny element zostanie wyświetlony. (podobne do tradycyjnego zachowania akordeonowego - zależy to od card klasy). Atrybut musi być ustawiony na docelowym zwijanym obszarze. |
przełącznik | logiczne | PRAWDA | Przełącza zwijany element przy wywołaniu |
Metody
Metody asynchroniczne i przejścia
Wszystkie metody API są asynchroniczne i rozpoczynają przejście . Wracają do rozmówcy zaraz po rozpoczęciu przejścia, ale przed jego zakończeniem . Ponadto wywołanie metody na składniku przechodzącym zostanie zignorowane .
Zobacz naszą dokumentację JavaScript, aby uzyskać więcej informacji .
.collapse(options)
Aktywuje zawartość jako zwijany element. Akceptuje opcjonalne opcje object
.
$('#myCollapsible').collapse({
toggle: false
})
.collapse('toggle')
Przełącza zwijany element na pokazany lub ukryty. Wraca do wywołującego, zanim zwijany element został faktycznie pokazany lub ukryty (tj. przed wystąpieniem zdarzenia shown.bs.collapse
lub ).hidden.bs.collapse
.collapse('show')
Pokazuje składany element. Powraca do wywołującego, zanim zwijany element został faktycznie pokazany (tj. przed shown.bs.collapse
wystąpieniem zdarzenia).
.collapse('hide')
Ukrywa składany element. Wraca do wywołującego, zanim zwijalny element został faktycznie ukryty (tj. przed hidden.bs.collapse
wystąpieniem zdarzenia).
.collapse('dispose')
Niszczy upadek elementu.
Wydarzenia
Klasa zwijania Bootstrap udostępnia kilka zdarzeń umożliwiających podłączenie do funkcji zwijania.
Typ wydarzenia | Opis |
---|---|
pokaż.bs.zwiń | To zdarzenie jest wyzwalane natychmiast po show wywołaniu metody wystąpienia. |
pokazano.bs.zwiń | To zdarzenie jest wywoływane, gdy element zwinięcia jest widoczny dla użytkownika (poczeka na zakończenie przejścia CSS). |
ukryj.bs.zwiń | To zdarzenie jest wywoływane natychmiast po hide wywołaniu metody. |
ukryty.bs.zwiń | To zdarzenie jest wywoływane, gdy element zwinięcia zostanie ukryty przed użytkownikiem (poczeka na zakończenie przejścia CSS). |
$('#myCollapsible').on('hidden.bs.collapse', function () {
// do something...
})