Перейти к основному содержанию Перейти к навигации по документам
in English

Крах

Переключите видимость контента в вашем проекте с помощью нескольких классов и наших плагинов JavaScript.

Как это работает

Плагин сворачивания JavaScript используется для отображения и скрытия контента. Кнопки или якоря используются в качестве триггеров, которые сопоставляются с определенными элементами, которые вы переключаете. Сворачивание элемента изменит heightего текущее значение на 0. Учитывая, как CSS обрабатывает анимацию, вы не можете использовать paddingего для .collapseэлемента. Вместо этого используйте класс как независимый элемент-оболочку.

Эффект анимации этого компонента зависит от prefers-reduced-motionмедиа-запроса. См. раздел с ограниченным движением в нашей документации по специальным возможностям .

Пример

Нажмите кнопки ниже, чтобы показать или скрыть другой элемент с помощью изменений класса:

  • .collapseскрывает содержимое
  • .collapsingприменяется во время переходов
  • .collapse.showпоказывает содержимое

Как правило, мы рекомендуем использовать кнопку с data-bs-targetатрибутом. Хотя это и не рекомендуется с семантической точки зрения, вы также можете использовать ссылку с hrefатрибутом (и role="button"). В обоих случаях data-bs-toggle="collapse"требуется .

Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
<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>

Горизонтальный

Плагин коллапса также поддерживает горизонтальное коллапсирование. Добавьте .collapse-horizontalкласс модификатора для перехода widthвместо heightи установите a widthдля непосредственного дочернего элемента. Вы можете написать свой собственный Sass, использовать встроенные стили или воспользоваться нашими утилитами ширины .

Обратите внимание, что хотя в приведенном ниже примере есть min-heightнабор, позволяющий избежать чрезмерных перерисовок в наших документах, это явно не требуется. Требуется только widthдочерний элемент.

This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
<p>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample">
    Toggle width collapse
  </button>
</p>
<div style="min-height: 120px;">
  <div class="collapse collapse-horizontal" id="collapseWidthExample">
    <div class="card card-body" style="width: 300px;">
      This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
    </div>
  </div>
</div>

Несколько целей

Или <button>может <a>отображать и скрывать несколько элементов, ссылаясь на них с помощью селектора в своем атрибуте hrefили . data-bs-targetНесколько <button>или <a>могут отображать и скрывать элемент, если каждый из них ссылается на него со своим атрибутом hrefилиdata-bs-target

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.
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.
<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;
$transition-collapse-width:   width .35s ease;

Классы

Классы перехода Collapse можно найти в scss/_transitions.scss, так как они являются общими для нескольких компонентов (collapse и аккордеон).

.collapse {
  &:not(.show) {
    display: none;
  }
}

.collapsing {
  height: 0;
  overflow: hidden;
  @include transition($transition-collapse);

  &.collapse-horizontal {
    width: 0;
    height: auto;
    @include transition($transition-collapse-width);
  }
}

Применение

Плагин сворачивания использует несколько классов для выполнения тяжелой работы:

  • .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...
})