Upadek
Przełącz widoczność treści w całym projekcie za pomocą kilku klas i naszych wtyczek JavaScript.
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ę heightod jego bieżącej wartości do 0. Biorąc pod uwagę, jak CSS obsługuje animacje, nie możesz użyć paddingna .collapseelemencie. Zamiast tego użyj klasy jako niezależnego elementu opakowującego.
Kliknij poniższe przyciski, aby pokazać i ukryć inny element poprzez zmiany klasy:
.collapseukrywa treść.collapsingjest stosowany podczas przejść.collapse.showpokazuje treść
Możesz użyć linku z hrefatrybutem lub przycisku z data-targetatrybutem. 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">
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>A <button>lub <a>może pokazywać i ukrywać wiele elementów, odwołując się do nich za pomocą selektora JQuery w atrybucie hreflub . data-targetWiele <button>lub <a>może pokazywać i ukrywać element, jeśli każdy z nich odwołuje się do niego za pomocą swojego atrybutu hreflubdata-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">
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>Używając komponentu karty , możesz rozszerzyć domyślne zachowanie zwijania, aby utworzyć akordeon.
<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>Pamiętaj, aby dodać aria-expandeddo 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 showklasy, aria-expanded="true"zamiast tego ustaw kontrolkę. Wtyczka automatycznie przełączy ten atrybut w kontrolce na podstawie tego, czy zwijany element został otwarty lub zamknięty (za pomocą JavaScript lub dlatego, że użytkownik wyzwolił inny element sterujący również powiązany z tym samym elementem zwijanym). 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-targetatrybut wskazuje na idselektor – powinieneś dodać aria-controlsatrybut do elementu kontrolnego zawierającego idelement 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 Bootstrapa nie obejmuje różnych interakcji klawiatury opisanych we wzorcu akordeonowym WAI-ARIA Authoring Practices 1.1 — musisz je dołączyć samodzielnie w niestandardowym JavaScript.
Wtyczka zwijania wykorzystuje kilka klas do obsługi podnoszenia ciężkich przedmiotów:
.collapseukrywa treść.collapse.showpokazuje treść.collapsingjest dodawany po rozpoczęciu przejścia i usuwany po jego zakończeniu
Klasy te można znaleźć w _transitions.scss.
Wystarczy dodać data-toggle="collapse"i a data-targetdo elementu, aby automatycznie przypisać kontrolę nad jednym lub większą liczbą zwijanych elementów. data-targetAtrybut akceptuje selektor CSS, do którego ma zostać zastosowane zwinięcie . Pamiętaj, aby dodać klasę collapsedo 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.
Włącz ręcznie za pomocą:
$('.collapse').collapse()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 cardklasy). Atrybut musi być ustawiony na docelowym zwijanym obszarze. |
| przełącznik | logiczne | PRAWDA | Przełącza zwijany element przy wywołaniu |
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.
Aktywuje zawartość jako zwijany element. Akceptuje opcjonalne opcje object.
$('#myCollapsible').collapse({
toggle: false
})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.collapselub ).hidden.bs.collapse
Pokazuje składany element. Powraca do wywołującego, zanim zwijany element został faktycznie pokazany (tj. przed shown.bs.collapsewystąpieniem zdarzenia).
Ukrywa składany element. Wraca do wywołującego, zanim zwijalny element został faktycznie ukryty (tj. przed hidden.bs.collapsewystąpieniem zdarzenia).
Niszczy upadek elementu.
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 showwywoł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 hidewywoł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…
})