Bootstrap JS Свернуть
JS свернуть (свернуть. js)
Получите базовые стили и гибкую поддержку для складных компонентов, таких как аккордеоны и навигация.
Зависимость от плагина: коллапс требует включения плагина Transitions в вашу версию Bootstrap.
Для учебника о складные, прочитайте наш Bootstrap свернуть учебник.
Классы плагина свертывания
| Класс | Описание | |
|---|---|---|
| .collapse | Скрывает содержимое | |
| .collapse in | Показывает содержимое | |
| .collapsing | Добавлено, когда начинается переход, и удаляется по завершении |
Через Data-* атрибуты
Просто добавьте данные-Toggle = "Свернуть" и целевой объект данных к элементу, чтобы автоматически назначить управление складным элементом. Атрибут Data-Target принимает селектор CSS для применения свертывания. Обязательно добавьте коллапс класса в складной элемент. Если вы хотите, чтобы по умолчанию открыть, добавьте дополнительный класс в.
Пример
<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 | Все складные элементы под заданным родителем будут закрыты при отображении этого складного элемента. (аналогично традиционному аккордеонному поведению-это зависит от класса Panel)-смотрите пример ниже |
| toggle | boolean | true | Переключение складного элемента при вызове |
Свернуть методы
В следующей таблице перечислены все доступные методы свертывания.
| Метод | Описание | |
|---|---|---|
| .collapse(options) | Активирует складной элемент с опцией. Приведенные выше параметры для допустимых значений | |
| .collapse("toggle") | Переключение складного элемента | |
| .collapse("show") | Показывает складной элемент | |
| .collapse("hide") | Скрывает складной элемент |
Свернуть события
В следующей таблице перечислены все доступные события свертывания.
| Событие | Описание | |
|---|---|---|
| show.bs.collapse | Происходит при отображении складного элемента | |
| shown.bs.collapse | Происходит при полном отображении складного элемента (после завершения CSS-переходов) | |
| hide.bs.collapse | Происходит при скрытии складного элемента | |
| hidden.bs.collapse | Происходит, когда складной элемент полностью скрыт (после завершения CSS-переходов) |
Другие примеры
Простой складной
В следующем примере кнопка переключает расширяющееся и разрушающееся содержимое другого элемента.
Пример
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">
Simple collapsible
</button>
<div id="demo" class="collapse in">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
</div>
Складная панель
В следующем примере показана Складная панель:
Пример
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1">Collapsible panel</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">Panel Body</div>
<div class="panel-footer">Panel Footer</div>
</div>
</div>
</div>
Складная группа списков
Ниже показана Складная панель с группой List внутри:
Пример
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1">Collapsible list group</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<ul class="list-group">
<li class="list-group-item">One</li>
<li class="list-group-item">Two</li>
<li class="list-group-item">Three</li>
</ul>
<div class="panel-footer">Footer</div>
</div>
</div>
</div>
Аккордеон
В следующем примере демонстрируется простой аккордеон, расширяющий компонент Panel:
Примечание: data-parentатрибут гарантирует, что все складные элементы под заданным родителем будут закрыты при отображении одного из складных элементов.
Пример
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
Collapsible Group 1</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
Collapsible Group 2</a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse3">
Collapsible Group 3</a>
</h4>
</div>
<div id="collapse3" class="panel-collapse collapse">
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</div>
</div>
</div>
</div>
Развернуть и свернуть значок переключения и текст
В следующем примере изменяется текст и значок открытия/закрытия при открытии и закрытии складского содержимого:
Пример
$(document).ready(function(){
$("#demo").on("hide.bs.collapse", function(){
$(".btn").html('<span class="glyphicon glyphicon-collapse-down"></span> Open');
});
$("#demo").on("show.bs.collapse", function(){
$(".btn").html('<span class="glyphicon glyphicon-collapse-up"></span> Close');
});
});
Или вы можете использовать CSS:
Пример
/* Icon when the collapsible content is shown */
.btn:after {
font-family: "Glyphicons Halflings";
content: "\e114";
}
/* Icon when the collapsible content is hidden */
.btn.collapsed:after {
content: "\e080";
}
