Крах
Переключите видимость контента в вашем проекте с помощью нескольких классов и наших плагинов JavaScript.
Нажмите кнопки ниже, чтобы показать или скрыть другой элемент с помощью изменений класса:
.collapse
скрывает содержимое.collapsing
применяется во время переходов.collapse.show
показывает содержимое
Вы можете использовать ссылку с href
атрибутом или кнопку с data-target
атрибутом. В обоих случаях 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">
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>
Или <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">
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>
Используя компонент карты , вы можете расширить поведение свертывания по умолчанию, чтобы создать аккордеон.
<div id="accordion">
<div class="card">
<div class="card-header" id="headingOne">
<h5 class="mb-0">
<button class="btn btn-link" 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="#accordion">
<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" 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="#accordion">
<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" 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="#accordion">
<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>
Обязательно добавьте aria-expanded
в элемент управления. Этот атрибут явно передает текущее состояние сворачиваемого элемента, привязанного к элементу управления, программам чтения с экрана и аналогичным вспомогательным технологиям. Если складной элемент закрыт по умолчанию, атрибут элемента управления должен иметь значение aria-expanded="false"
. Если вы настроили раскрывающийся элемент по умолчанию с помощью show
класса, aria-expanded="true"
вместо этого установите его в элементе управления. Плагин будет автоматически переключать этот атрибут в элементе управления в зависимости от того, был ли сворачиваемый элемент открыт или закрыт (с помощью JavaScript или потому, что пользователь активировал другой элемент управления, также привязанный к тому же сворачиваемому элементу). Если элемент HTML элемента управления не является кнопкой (например, <a>
или <div>
), атрибутrole="button"
следует добавить к элементу.
Если ваш элемент управления нацелен на один сворачиваемый элемент — т. е. data-target
атрибут указывает на id
селектор — вы должны добавить aria-controls
атрибут к элементу управления, содержащему id
складной элемент. Современные средства чтения с экрана и аналогичные вспомогательные технологии используют этот атрибут, чтобы предоставить пользователям дополнительные ярлыки для перехода непосредственно к самому сворачиваемому элементу.
Обратите внимание, что текущая реализация Bootstrap не охватывает различные взаимодействия с клавиатурой, описанные в шаблоне аккордеона WAI-ARIA Authoring Practices 1.1 — вам нужно будет включить их самостоятельно с помощью пользовательского JavaScript.
Плагин сворачивания использует несколько классов для выполнения тяжелой работы:
.collapse
скрывает содержимое.collapse.show
показывает содержимое.collapsing
добавляется, когда начинается переход, и удаляется, когда он заканчивается
Эти классы можно найти в _transitions.scss
.
Просто добавьте data-toggle="collapse"
и data-target
к элементу, чтобы автоматически назначить управление одним или несколькими складными элементами. Атрибут data-target
принимает селектор CSS, к которому применяется свертывание. Обязательно добавьте класс collapse
к складному элементу. Если вы хотите, чтобы он открывался по умолчанию, добавьте дополнительный класс show
.
Чтобы добавить в сворачиваемую область управление группами в стиле аккордеона, добавьте атрибут данных data-parent="#selector"
. Обратитесь к демо, чтобы увидеть это в действии.
Включить вручную с помощью:
Параметры можно передавать через атрибуты данных или JavaScript. Для атрибутов данных добавьте имя опции к data-
, как в data-parent=""
.
Имя | Тип | По умолчанию | Описание |
---|---|---|---|
родитель | селектор | объект jQuery | DOM-элемент | ЛОЖЬ | Если указан родитель, то все сворачиваемые элементы под указанным родителем будут закрыты при отображении этого сворачиваемого элемента. (аналогично традиционному поведению аккордеона - это зависит от card класса). Атрибут должен быть установлен в целевой складной области. |
переключать | логический | истинный | Переключает сворачиваемый элемент при вызове |
Асинхронные методы и переходы
Все методы API являются асинхронными и запускают переход . Они возвращаются к вызывающей стороне сразу после начала перехода, но до его завершения . Кроме того, вызов метода переходного компонента будет игнорироваться .
См. нашу документацию по JavaScript для получения дополнительной информации.
Активирует ваш контент как складной элемент. Принимает необязательные параметры object
.
Отображает или скрывает сворачиваемый элемент. Возвращает вызывающему объекту до того, как сворачиваемый элемент действительно будет показан или скрыт (т. е. до того , как произойдет событие shown.bs.collapse
или ).hidden.bs.collapse
Показывает разборный элемент. Возвращает вызывающему объекту до фактического отображения сворачиваемого элемента (т. е. до того , как shown.bs.collapse
произойдет событие).
Скрывает складной элемент. Возвращает вызывающему объекту до того, как сворачиваемый элемент будет фактически скрыт (т. е. до того , как hidden.bs.collapse
произойдет событие).
Разрушает коллапс элемента.
Класс коллапса Bootstrap предоставляет несколько событий для подключения к функциональности коллапса.
Тип события | Описание |
---|---|
show.bs.collapse | Это событие срабатывает сразу же при show вызове метода экземпляра. |
показан.bs.свернуть | Это событие запускается, когда элемент свертывания становится видимым для пользователя (будет ожидать завершения переходов CSS). |
скрыть.bs.collapse | Это событие запускается сразу после вызова hide метода. |
скрытый.bs.коллапс | Это событие запускается, когда элемент свертывания был скрыт от пользователя (будет ожидать завершения переходов CSS). |