JS Collapse (collapse.js)
Получить базовые стили и гибкую поддержку складных компонентов, таких как аккордеонов и навигация.
Плагин зависимость: Коллапс требует переходов плагин для включения в вашей версии Bootstrap.
Для учебника о Collapsibles, читайте наш Bootstrap Collapse Учебник .
The Collapse Plugin Classes
| Класс | Описание | пример |
|---|---|---|
| .collapse | Скрывает содержимое | Попробуй |
| .collapse in | Показывает содержимое | Попробуй |
| .collapsing | Добавлено, когда начинается переход, и удаляется, когда он заканчивает | Попробуй |
Via data-* Атрибуты
Просто добавьте data-toggle="collapse" и дата-цель элемента для автоматического назначения управления складного элемента. Данных целевой атрибут принимает селектор CSS, чтобы применить коллапс. Не забудьте добавить коллапс класса к складного элемента. Если вы хотите, чтобы она по умолчанию открытым, добавить дополнительный класс в.
пример
<button class="btn" data-toggle="collapse" data-target="#demo">Collapsible</button>
<div id="demo" class="collapse">
Some text..
</div>
Попробуй сам " Совет: Чтобы добавить гармошки , как управление группами в складном управления, добавить данные атрибутов data-parent="#selector" .
Через JavaScript
Включить вручную с помощью:
$('.collapse').collapse()Свернуть параметры
Параметры могут быть переданы с помощью атрибутов данных или JavaScript. Для атрибутов данных, добавьте имя параметра к данные-, так как в data-parent="" .
| имя | Тип | По умолчанию | Описание |
|---|---|---|---|
| parent | selector | false | Все разборные элементы по указанному родителя будут закрыты, когда этот разборный элемент показан. (По аналогии с традиционным поведением аккордеона - это зависит от класса панели) - смотрите пример ниже |
| toggle | boolean | true | Включает разборную элемент при вызове |
Методы Collapse
В следующей таблице перечислены все доступные методы коллапса.
| метод | Описание | Попробуй |
|---|---|---|
| .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> Попробуй сам " Складывающийся Список групп
Ниже показана складная панель со списком группы внутри:
пример
<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> Попробуй сам " аккордеон
В следующем примере показан простой аккордеон, расширив компонент панели:
Примечание: 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> Попробуй сам " Развернуть и Свернуть Переключить Icon & Text
Следующий пример изменяет открытия / закрытия текст и значок при открытии и закрытии складного содержания:
пример
$(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";
} Попробуй сам "