Крах
Переключите видимость контента в вашем проекте с помощью нескольких классов и наших плагинов JavaScript.
Как это работает
Плагин сворачивания JavaScript используется для отображения и скрытия контента. Кнопки или якоря используются в качестве триггеров, которые сопоставляются с определенными элементами, которые вы переключаете. Сворачивание элемента изменит height
его текущее значение на 0
. Учитывая, как CSS обрабатывает анимацию, вы не можете использовать padding
его для .collapse
элемента. Вместо этого используйте класс как независимый элемент-оболочку.
prefers-reduced-motion
медиа-запроса. См.
раздел с ограниченным движением в нашей документации по специальным возможностям .
Пример
Нажмите кнопки ниже, чтобы показать или скрыть другой элемент с помощью изменений класса:
.collapse
скрывает содержимое.collapsing
применяется во время переходов.collapse.show
показывает содержимое
Как правило, мы рекомендуем использовать кнопку с data-bs-target
атрибутом. Хотя это и не рекомендуется с семантической точки зрения, вы также можете использовать ссылку с href
атрибутом (и role="button"
). В обоих случаях data-bs-toggle="collapse"
требуется .
<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>
Несколько целей
Или <button>
может <a>
отображать и скрывать несколько элементов, ссылаясь на них с помощью селектора в своем атрибуте href
или . data-bs-target
Несколько <button>
или <a>
могут отображать и скрывать элемент, если каждый из них ссылается на него со своим атрибутом href
илиdata-bs-target
<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>
Доступность
Обязательно добавьте aria-expanded
в элемент управления. Этот атрибут явно передает текущее состояние сворачиваемого элемента, привязанного к элементу управления, программам чтения с экрана и аналогичным вспомогательным технологиям. Если складной элемент закрыт по умолчанию, атрибут элемента управления должен иметь значение aria-expanded="false"
. Если вы настроили раскрывающийся элемент по умолчанию с помощью show
класса, aria-expanded="true"
вместо этого установите его в элементе управления. Плагин будет автоматически переключать этот атрибут в элементе управления в зависимости от того, был ли сворачиваемый элемент открыт или закрыт (с помощью JavaScript или потому, что пользователь активировал другой элемент управления, также привязанный к тому же сворачиваемому элементу). Если элемент HTML элемента управления не является кнопкой (например, <a>
или <div>
), атрибутrole="button"
следует добавить к элементу.
Если ваш элемент управления нацелен на один сворачиваемый элемент — т. е. data-bs-target
атрибут указывает на id
селектор — вы должны добавить aria-controls
атрибут к элементу управления, содержащему id
складной элемент. Современные средства чтения с экрана и аналогичные вспомогательные технологии используют этот атрибут, чтобы предоставить пользователям дополнительные ярлыки для перехода непосредственно к самому сворачиваемому элементу.
Обратите внимание, что текущая реализация Bootstrap не охватывает различные необязательные взаимодействия с клавиатурой, описанные в шаблоне аккордеона WAI-ARIA Authoring Practices 1.1 — вам нужно будет включить их самостоятельно с помощью пользовательского JavaScript.
Сасс
Переменные
$transition-collapse: height .35s ease;
Классы
Классы перехода Collapse можно найти в scss/_transitions.scss
, так как они являются общими для нескольких компонентов (collapse и аккордеон).
.collapse {
&:not(.show) {
display: none;
}
}
.collapsing {
height: 0;
overflow: hidden;
@include transition($transition-collapse);
}
Применение
Плагин сворачивания использует несколько классов для выполнения тяжелой работы:
.collapse
скрывает содержимое.collapse.show
показывает содержимое.collapsing
добавляется, когда начинается переход, и удаляется, когда он заканчивается
Эти классы можно найти в _transitions.scss
.
Через атрибуты данных
Просто добавьте data-bs-toggle="collapse"
и data-bs-target
к элементу, чтобы автоматически назначить управление одним или несколькими складными элементами. Атрибут data-bs-target
принимает селектор CSS, к которому применяется свертывание. Обязательно добавьте класс collapse
к складному элементу. Если вы хотите, чтобы он открывался по умолчанию, добавьте дополнительный класс show
.
Чтобы добавить в сворачиваемую область управление группами в стиле аккордеона, добавьте атрибут данных data-bs-parent="#selector"
. Обратитесь к демо, чтобы увидеть это в действии.
Через JavaScript
Включить вручную с помощью:
var collapseElementList = [].slice.call(document.querySelectorAll('.collapse'))
var collapseList = collapseElementList.map(function (collapseEl) {
return new bootstrap.Collapse(collapseEl)
})
Опции
Параметры можно передавать через атрибуты данных или JavaScript. Для атрибутов данных добавьте имя опции к data-bs-
, как в data-bs-parent=""
.
Имя | Тип | По умолчанию | Описание |
---|---|---|---|
parent |
селектор | объект jQuery | DOM-элемент | false |
Если указан родитель, то все сворачиваемые элементы под указанным родителем будут закрыты при отображении этого сворачиваемого элемента. (аналогично традиционному поведению аккордеона - это зависит от card класса). Атрибут должен быть установлен в целевой складной области. |
toggle |
логический | true |
Переключает сворачиваемый элемент при вызове |
Методы
Асинхронные методы и переходы
Все методы API являются асинхронными и запускают переход . Они возвращаются к вызывающей стороне сразу после начала перехода, но до его завершения . Кроме того, вызов метода переходного компонента будет игнорироваться .
Дополнительную информацию см. в нашей документации по JavaScript .
Активирует ваш контент как складной элемент. Принимает необязательные параметры object
.
Вы можете создать экземпляр свертывания с помощью конструктора, например:
var myCollapse = document.getElementById('myCollapse')
var bsCollapse = new bootstrap.Collapse(myCollapse, {
toggle: false
})
Метод | Описание |
---|---|
toggle |
Отображает или скрывает сворачиваемый элемент. Возвращает вызывающему объекту до того, как сворачиваемый элемент действительно будет показан или скрыт (т. е. до того , как произойдет событие shown.bs.collapse или ).hidden.bs.collapse |
show |
Показывает разборный элемент. Возвращает вызывающему объекту до того, как сворачиваемый элемент действительно будет показан (например, до того, как shown.bs.collapse произойдет событие). |
hide |
Скрывает складной элемент. Возвращает вызывающему объекту до того, как сворачиваемый элемент будет фактически скрыт (например, до того, как hidden.bs.collapse произойдет событие). |
dispose |
Разрушает коллапс элемента. (Удаляет сохраненные данные в элементе DOM) |
getInstance |
Статический метод, который позволяет вам получить экземпляр сворачивания, связанный с элементом DOM, вы можете использовать его следующим образом:bootstrap.Collapse.getInstance(element) |
getOrCreateInstance |
Статический метод, который возвращает экземпляр свертывания, связанный с элементом DOM, или создает новый, если он не был инициализирован. Вы можете использовать его следующим образом:bootstrap.Collapse.getOrCreateInstance(element) |
События
Класс коллапса Bootstrap предоставляет несколько событий для подключения к функциональности коллапса.
Тип события | Описание |
---|---|
show.bs.collapse |
Это событие срабатывает сразу же при show вызове метода экземпляра. |
shown.bs.collapse |
Это событие запускается, когда элемент свертывания становится видимым для пользователя (будет ожидать завершения переходов CSS). |
hide.bs.collapse |
Это событие запускается сразу после вызова hide метода. |
hidden.bs.collapse |
Это событие запускается, когда элемент свертывания был скрыт от пользователя (будет ожидать завершения переходов CSS). |
var myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', function () {
// do something...
})