Колапс
Вклучете ја видливоста на содржината низ вашиот проект со неколку класи и нашите додатоци за JavaScript.
Како работи
Приклучокот за колапс JavaScript се користи за прикажување и криење на содржината. Копчињата или сидрата се користат како активирања кои се мапирани на одредени елементи што ги менувате. Со собирање елемент ќе се анимира height
од неговата моментална вредност во 0
. Со оглед на тоа како CSS се справува со анимации, не можете да користите padding
на .collapse
елемент. Наместо тоа, користете ја класата како независен елемент за завиткување.
prefers-reduced-motion
медиумското барање. Погледнете го делот за
намалено движење од нашата документација за пристапност .
Пример
Кликнете на копчињата подолу за да прикажете и скриете друг елемент преку промени во класата:
.collapse
ја крие содржината.collapsing
се применува за време на транзициите.collapse.show
покажува содржина
Општо земено, препорачуваме да користите копче со data-target
атрибутот. Иако не се препорачува од семантичка гледна точка, можете да користите и врска со href
атрибутот (и a 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
елементот на дете.
<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 елементот на контролниот елемент не е копче (на пример, an <a>
или <div>
), атрибутотrole="button"
треба да се додаде на елементот.
Ако вашиот контролен елемент цели на еден склоплив елемент - т.е. data-target
атрибутот покажува на id
избирач - треба да го додадете aria-controls
атрибутот на контролниот елемент, кој го содржи елементот id
што се склопува. Современите читачи на екранот и сличните помошни технологии го користат овој атрибут за да им обезбедат на корисниците дополнителни кратенки за директно навигација до самиот елемент што се склопува.
Имајте предвид дека тековната имплементација на Bootstrap не ги опфаќа различните интеракции на тастатурата опишани во Водичот за авторски практики на ARIA за хармоника - ќе треба сами да ги вклучите со приспособениот JavaScript.
Употреба
Приклучокот за колапс користи неколку класи за да се справи со кревање тешки предмети:
.collapse
ја крие содржината.collapse.show
ја покажува содржината.collapsing
се додава кога ќе започне транзицијата и се отстранува кога ќе заврши
Овие часови може да се најдат во _transitions.scss
.
Преку атрибути на податоци
Само додадете data-toggle="collapse"
и a data-target
на елементот за автоматски да доделите контрола на еден или повеќе елементи што се склопуваат. Атрибутот data-target
прифаќа CSS избирач за да се примени колапсот. Не заборавајте да ја додадете класата collapse
во склопувачкиот елемент. Ако сакате стандардно да се отвори, додадете ја дополнителната класа show
.
За да додадете управување со група како хармоника во склоплива област, додајте го атрибутот податоци data-parent="#selector"
. Погледнете го демото за да го видите ова во акција.
Преку JavaScript
Овозможи рачно со:
$('.collapse').collapse()
Опции
Опциите може да се пренесат преку атрибути на податоци или JavaScript. За атрибути на податоци, додајте го името на опцијата на data-
, како во data-parent=""
.
Име | Тип | Стандардно | Опис |
---|---|---|---|
родител | селектор | jQuery објект | DOM елемент | лажни | Ако е обезбеден родител, тогаш сите елементи што се склопуваат под наведениот родител ќе бидат затворени кога ќе се прикаже оваа ставка што може да се склопува. (слично на традиционалното однесување на хармоника - ова зависи од card класата). Атрибутот треба да се постави на целната склоплива област. |
префрли | булови | вистина | Го исклучува склопувачкиот елемент при повикувањето |
Методи
Асинхрони методи и транзиции
Сите API методи се асинхрони и започнуваат транзиција . Тие се враќаат кај повикувачот штом ќе започне транзицијата, но пред да заврши . Дополнително, повик на метод на компонента во транзиција ќе се игнорира .
Погледнете ја нашата JavaScript документација за повеќе информации .
.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 ќе се повика методот на пример. |
прикажани.бс.колапс | Овој настан се активира кога елементот за колапс е видлив за корисникот (ќе чека да се завршат транзициите на CSS). |
скриј.бс.сруши | Овој настан се активира веднаш кога hide методот е повикан. |
скриен.бс.колапс | Овој настан се активира кога елементот за колапс е скриен од корисникот (ќе чека да се завршат транзициите на CSS). |
$('#myCollapsible').on('hidden.bs.collapse', function () {
// do something...
})