Згорнути
Перемкніть видимість вмісту у вашому проекті за допомогою кількох класів і наших плагінів JavaScript.
Як це працює
Плагін JavaScript для згортання використовується для показу та приховання вмісту. Кнопки або прив’язки використовуються як тригери, які зіставляються з певними елементами, які ви перемикаєте. Згортання елемента анімує height
його поточне значення до 0
. Зважаючи на те, як CSS обробляє анімацію, ви не можете використовувати padding
для .collapse
елемента. Замість цього використовуйте клас як незалежний елемент обгортки.
prefers-reduced-motion
медіа-запиту. Перегляньте розділ про
обмежений рух нашої документації щодо спеціальних можливостей .
приклад
Натисніть кнопки нижче, щоб показати або приховати інший елемент за допомогою змін класу:
.collapse
приховує вміст.collapsing
застосовується під час переходів.collapse.show
показує вміст
Зазвичай ми рекомендуємо використовувати кнопку з data-target
атрибутом. Хоча це не рекомендується із семантичної точки зору, ви також можете використовувати посилання з href
атрибутом (і role="button"
). В обох випадках data-toggle="collapse"
потрібно.
<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>
Горизонтальний
Плагін згортання також підтримує горизонтальне згортання. Додайте .width
клас-модифікатор для переходу width
замість height
і встановіть для width
безпосереднього дочірнього елемента. Не соромтеся писати свій власний Sass, використовувати вбудовані стилі або наші утиліти ширини .
min-height
набір для уникнення надмірного перефарбовування в наших документах, це явно не вимагається.
Потрібен лише width
дочірній елемент.
<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>
Кілька цілей
A <button>
або <a>
може показувати та приховувати кілька елементів, посилаючись на них за допомогою селектора JQuery в атрибуті href
або . data-target
Кілька <button>
або <a>
можуть показувати та приховувати елемент, якщо кожен з них посилається на нього за допомогою свого атрибута href
абоdata-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>
Приклад баяна
Використовуючи компонент карти , ви можете розширити типову поведінку згортання, щоб створити гармошку. Щоб правильно домогтися стилю гармошка, обов'язково використовуйте .accordion
в якості обгортки.
.show
класу.
<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>
Доступність
Обов'язково додайте aria-expanded
до елемента управління. Цей атрибут явно передає поточний стан елемента, що згортається, пов’язаного з елементом керування програмами зчитування з екрана та подібними допоміжними технологіями. Якщо елемент, що згортається, закрито за замовчуванням, атрибут елемента керування має мати значення aria-expanded="false"
. Якщо ви встановили, що елемент, що згортається, відкритий за замовчуванням за допомогою show
класу, aria-expanded="true"
замість цього встановіть елемент керування. Плагін автоматично перемикає цей атрибут на елементі керування залежно від того, чи був відкритий чи закритий елемент, що згортається, чи ні (через JavaScript або через те, що користувач запустив інший елемент керування, також прив’язаний до того самого елемента, що згортається). Якщо елемент HTML елемента керування не є кнопкою (наприклад, <a>
або <div>
), атрибутrole="button"
слід додати до елемента.
Якщо ваш елемент керування націлений на один елемент, що згортається, тобто data-target
атрибут вказує на id
селектор, вам слід додати aria-controls
атрибут до елемента керування, який містить елемент, що id
згортається. Сучасні програми зчитування з екрана та подібні допоміжні технології використовують цей атрибут, щоб надати користувачам додаткові ярлики для переходу безпосередньо до самого елемента, що згортається.
Зауважте, що поточна реалізація Bootstrap не охоплює різні взаємодії з клавіатурою, описані в шаблоні акордеона ARIA Authoring Practices Guide - вам потрібно буде включити їх самостійно за допомогою спеціального JavaScript.
Використання
Плагін згортання використовує кілька класів для обробки важких завдань:
.collapse
приховує вміст.collapse.show
показує вміст.collapsing
додається, коли перехід починається, і видаляється, коли він завершується
Ці класи можна знайти в _transitions.scss
.
Через атрибути даних
Просто додайте data-toggle="collapse"
та data-target
до елемента, щоб автоматично призначити керування одним або декількома складними елементами. Атрибут data-target
приймає селектор CSS для застосування згортання. Обов’язково додайте клас collapse
до розбірного елемента. Якщо ви хочете, щоб він відкривався за умовчанням, додайте додатковий клас show
.
Щоб додати до згорнутої області керування групами, схоже на акордеон, додайте атрибут даних data-parent="#selector"
. Перегляньте демонстрацію, щоб побачити це в дії.
Через JavaScript
Увімкнути вручну за допомогою:
$('.collapse').collapse()
Опції
Параметри можна передати через атрибути даних або JavaScript. Для атрибутів даних додайте назву опції до data-
, як у data-parent=""
.
Ім'я | Тип | За замовчуванням | опис |
---|---|---|---|
батькові | селектор | Об'єкт jQuery | Елемент DOM | помилковий | Якщо вказано батьківський елемент, усі елементи, що згортаються, у вказаному батьківському елементі будуть закриті, коли буде показано цей згорнутий елемент. (подібна до традиційної поведінки акордеона - це залежить від card класу). Атрибут має бути встановлено на цільовій складній області. |
перемикач | логічний | правда | Перемикає елемент, що згортається, під час виклику |
методи
Асинхронні методи та переходи
Усі методи API є асинхронними та починають перехід . Вони повертаються до абонента, щойно перехід починається, але до його завершення . Крім того, виклик методу компонента, що переходить, ігноруватиметься .
Дивіться нашу документацію JavaScript для отримання додаткової інформації .
.collapse(options)
Активує ваш вміст як складний елемент. Приймає додаткові параметри object
.
$('#myCollapsible').collapse({
toggle: false
})
.collapse('toggle')
Перемикає елемент, що згортається, на показаний або прихований. Повертається до абонента до того, як згорнутий елемент буде фактично показано або приховано (тобто до того, як відбудеться подія shown.bs.collapse
або ).hidden.bs.collapse
.collapse('show')
Показує розбірний елемент. Повертається до абонента до того, як згорнутий елемент буде фактично показано (тобто до того , як відбудеться shown.bs.collapse
подія).
.collapse('hide')
Приховує розбірний елемент. Повертається до абонента до того, як згорнутий елемент буде фактично приховано (тобто до того , як відбудеться hidden.bs.collapse
подія).
.collapse('dispose')
Руйнує колапс елемента.
Події
Клас згортання Bootstrap надає кілька подій для підключення до функціональності згортання.
Тип події | опис |
---|---|
show.bs.collapse | Ця подія запускається негайно, коли show викликається метод екземпляра. |
показано.bs.collapse | Ця подія запускається, коли елемент згортання стає видимим для користувача (чекатиме, поки завершаться переходи CSS). |
hide.bs.collapse | Ця подія запускається відразу після виклику hide методу. |
hidden.bs.collapse | Ця подія запускається, коли елемент згортання приховано від користувача (чекатиме, поки завершаться переходи CSS). |
$('#myCollapsible').on('hidden.bs.collapse', function () {
// do something...
})