Bootstrap 4 JS Collapse
Свернуть классы CSS
Для учебника о складные, прочитайте наш Bootstrap свернуть учебник.
| Класс | Описание | |
|---|---|---|
.collapse |
Скрывает содержимое | |
.collapse show |
Отображение складского содержимого по умолчанию | |
.collapsing |
Добавлено, когда начинается переход, и удаляется по завершении |
Через Data-* атрибуты
Просто добавьте элемент "to", data-toggle="collapse" data-target чтобы автоматически назначить элемент управления складным элементом. Атрибут Data-Target принимает селектор CSS для применения свертывания. Обязательно добавьте коллапс класса в складной элемент. Если вы хотите, чтобы по умолчанию открыть, добавить дополнительный класс "Show".
Пример
<button class="btn" data-toggle="collapse" data-target="#demo">Collapsible</button>
<div id="demo" class="collapse">
Some text..
</div>
Совет: Чтобы добавить управление групповыми аккордеонами в складной элемент управления, добавьте данные атрибута данных-Parent = "#selector".
Через JavaScript
Включить вручную с помощью:
$('.collapse').collapse()
Свернуть параметры
Параметры могут быть переданы через атрибуты данных или JavaScript. Для атрибутов данных добавьте имя параметра в Data-, как в Data-Parent = "".
| Имя | Тип | По умолчанию | Описание | |
|---|---|---|---|---|
| parent | selector | false | Все складные элементы под заданным родителем будут закрыты при отображении этого складного элемента. (аналогично традиционному аккордеонному поведению) | |
| toggle | boolean | true | Переключение складного элемента при вызове |
Свернуть методы
В следующей таблице перечислены все доступные методы свертывания.
| Метод | Описание | |
|---|---|---|
| .collapse(options) | Активирует складной элемент с опцией. Приведенные выше параметры для допустимых значений | |
| .collapse("toggle") | Переключение складного элемента | |
| .collapse("show") | Показывает складной элемент | |
| .collapse("hide") | Скрывает складной элемент | |
| .collapse("dispose") | Уничтожает складной элемент |
Свернуть события
В следующей таблице перечислены все доступные события свертывания.
| Событие | Описание | |
|---|---|---|
| show.bs.collapse | Происходит при отображении складного элемента | |
| shown.bs.collapse | Происходит при полном отображении складного элемента (после завершения CSS-переходов) | |
| hide.bs.collapse | Происходит при скрытии складного элемента | |
| hidden.bs.collapse | Происходит, когда складной элемент полностью скрыт (после завершения CSS-переходов) |