Свиване
Превключете видимостта на съдържанието във вашия проект с няколко класа и нашите плъгини за JavaScript.
Как работи
Плъгинът за свиване на JavaScript се използва за показване и скриване на съдържание. Бутоните или котвите се използват като тригери, които се нанасят на конкретни елементи, които превключвате. Свиването на елемент ще анимира height
от текущата му стойност до 0
. Като се има предвид как CSS обработва анимациите, не можете да използвате padding
върху .collapse
елемент. Вместо това използвайте класа като независим обвиващ елемент.
prefers-reduced-motion
медийната заявка. Вижте раздела за
намалено движение в нашата документация за достъпност .
Пример
Щракнете върху бутоните по-долу, за да покажете или скриете друг елемент чрез промени в класа:
.collapse
скрива съдържанието.collapsing
се прилага по време на преходи.collapse.show
показва съдържание
Като цяло препоръчваме да използвате бутон с data-target
атрибута. Въпреки че не се препоръчва от семантична гледна точка, можете също да използвате връзка с href
атрибута (и role="button"
). И в двата случая 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">
Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
</div>
</div>
Хоризонтална
Плъгинът за свиване също поддържа хоризонтално свиване. Добавете .width
модификаторния клас, за да прехвърлите width
вместо height
и задайте a width
върху непосредствения дъщерен елемент. Чувствайте се свободни да напишете свой собствен персонализиран Sass, да използвате вградени стилове или да използвате нашите помощни програми за ширина .
min-height
набор за избягване на прекомерни пребоядисвания в нашите документи, това не се изисква изрично.
Изисква се само width
on the child елемент.
<p>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample">
Toggle width collapse
</button>
</p>
<div style="min-height: 120px;">
<div class="collapse width" id="collapseWidthExample">
<div class="card card-body" style="width: 320px;">
This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
</div>
</div>
</div>
Множество цели
A <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">
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>
Пример за акордеон
Използвайки компонента на картата , можете да разширите поведението на свиване по подразбиране, за да създадете акордеон. За да постигнете правилно стила на акордеон, не забравяйте да използвате .accordion
като обвивка.
.show
класа.
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header" id="headingOne">
<h2 class="mb-0">
<button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Collapsible Group Item #1
</button>
</h2>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body">
Some placeholder content for the first accordion panel. This panel is shown by default, thanks to the <code>.show</code> class.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h2 class="mb-0">
<button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Collapsible Group Item #2
</button>
</h2>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
<div class="card-body">
Some placeholder content for the second accordion panel. This panel is hidden by default.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingThree">
<h2 class="mb-0">
<button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Collapsible Group Item #3
</button>
</h2>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
<div class="card-body">
And lastly, the placeholder content for the third and final accordion panel. This panel is hidden by default.
</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 не покрива различните взаимодействия с клавиатурата, описани в акордеонния модел на ръководството за авторски практики на ARIA - ще трябва да ги включите сами с персонализиран JavaScript.
Използване
Плъгинът за свиване използва няколко класа, за да се справи с тежкото повдигане:
.collapse
скрива съдържанието.collapse.show
показва съдържанието.collapsing
се добавя, когато преходът започне, и се премахва, когато приключи
Тези класове могат да бъдат намерени в _transitions.scss
.
Чрез атрибути на данни
Просто добавете data-toggle="collapse"
и data-target
към елемента, за да присвоите автоматично управление на един или повече сгъваеми елементи. Атрибутът data-target
приема CSS селектор, към който да се приложи свиването. Не забравяйте да добавите класа collapse
към сгъваемия елемент. Ако искате да е отворен по подразбиране, добавете допълнителния клас show
.
За да добавите подобно на акордеон групово управление към сгъваема област, добавете атрибута data data-parent="#selector"
. Обърнете се към демонстрацията, за да видите това в действие.
Чрез JavaScript
Активирайте ръчно с:
$('.collapse').collapse()
Настроики
Опциите могат да се предават чрез атрибути на данни или JavaScript. За атрибути на данни добавете името на опцията към data-
, както в data-parent=""
.
Име | Тип | По подразбиране | Описание |
---|---|---|---|
родител | селектор | jQuery обект | DOM елемент | невярно | Ако е предоставен родител, тогава всички сгъваеми елементи под посочения родител ще бъдат затворени, когато този сгъваем елемент се покаже. (подобно на традиционното поведение на акордеон - това зависи от card класа). Атрибутът трябва да бъде зададен върху целевата сгъваема област. |
превключвам | булево | вярно | Превключва сгъваемия елемент при извикване |
Методи
Асинхронни методи и преходи
Всички API методи са асинхронни и стартират преход . Те се връщат при повикващия веднага щом преходът започне, но преди да приключи . В допълнение, извикване на метод на преходен компонент ще бъде игнорирано .
.collapse(options)
Активира вашето съдържание като сгъваем елемент. Приема опции по избор object
.
$('#myCollapsible').collapse({
toggle: false
})
.collapse('toggle')
Превключва сгъваем елемент на показан или скрит. Връща се към повикващия, преди сгъваемият елемент действително да бъде показан или скрит (т.е. преди събитието shown.bs.collapse
или да hidden.bs.collapse
настъпи).
.collapse('show')
Показва сгъваем елемент. Връща се към повикващия, преди сгъваемият елемент действително да бъде показан (т.е. преди shown.bs.collapse
събитието да се случи).
.collapse('hide')
Скрива сгъваем елемент. Връща се към повикващия, преди сгъваемият елемент действително да е бил скрит (т.е. преди hidden.bs.collapse
събитието да се случи).
.collapse('dispose')
Унищожава колапс на елемент.
събития
Класът за свиване на Bootstrap разкрива няколко събития за свързване към функционалността за свиване.
Тип събитие | Описание |
---|---|
show.bs.collapse | Това събитие се задейства веднага, когато show се извика методът на екземпляра. |
показано.bs.свиване | Това събитие се задейства, когато елементът на свиване е направен видим за потребителя (ще изчака CSS преходите да завършат). |
hide.bs.collapse | Това събитие се задейства веднага след hide извикване на метода. |
hidden.bs.collapse | Това събитие се задейства, когато елемент на свиване е скрит от потребителя (ще изчака CSS преходите да завършат). |
$('#myCollapsible').on('hidden.bs.collapse', function () {
// do something...
})