Перайсці да асноўнага зместу Перайсці да навігацыі па дакументах
in English

Згарнуць

Пераключыце бачнасць кантэнту ў вашым праекце з дапамогай некалькіх класаў і нашых плагінаў JavaScript.

Як гэта працуе

Плагін JavaScript для згортвання выкарыстоўваецца для паказу і схавання змесціва. Кнопкі або якары выкарыстоўваюцца ў якасці трыгераў, якія супастаўляюцца з пэўнымі элементамі, якія вы перамыкаеце. Згортванне элемента анімуе heightяго бягучае значэнне да 0. Улічваючы, як CSS апрацоўвае анімацыю, вы не можаце выкарыстоўваць paddingдля .collapseэлемента. Замест гэтага выкарыстоўвайце клас як незалежны элемент абгорткі.

Анімацыйны эфект гэтага кампанента залежыць ад prefers-reduced-motionмедыя-запыту. Глядзіце раздзел аб паменшаным руху нашай дакументацыі па спецыяльных магчымасцях .

Прыклад

Націсніце кнопкі ніжэй, каб паказаць і схаваць іншы элемент праз змены класа:

  • .collapseхавае змест
  • .collapsingужываецца пры пераходах
  • .collapse.showпаказвае кантэнт

Як правіла, мы рэкамендуем выкарыстоўваць кнопку з data-bs-targetатрыбутам. Хоць гэта не рэкамендуецца з семантычнага пункту гледжання, вы таксама можаце выкарыстоўваць спасылку з hrefатрыбутам (і role="button"). У абодвух выпадках data-bs-toggle="collapse"патрабуецца.

Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
<p>
  <a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  </a>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Button with data-bs-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>

Гарызантальны

Убудова для згортвання таксама падтрымлівае гарызантальнае згортванне. Дадайце .collapse-horizontalклас-мадыфікатар для пераходу widthзамест heightі ўсталюйце для widthнепасрэднага даччынага элемента. Не саромейцеся пісаць свой уласны Sass, выкарыстоўваць убудаваныя стылі або выкарыстоўваць нашы ўтыліты шырыні .

Калі ласка, звярніце ўвагу, што хаця ў прыведзеным ніжэй прыкладзе ёсць min-heightнабор, каб пазбегнуць празмернага перафарбоўвання ў нашых дакументах, гэта відавочна не патрабуецца. Патрабуецца толькі widthдаччыны элемент.

This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
<p>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample">
    Toggle width collapse
  </button>
</p>
<div style="min-height: 120px;">
  <div class="collapse collapse-horizontal" id="collapseWidthExample">
    <div class="card card-body" style="width: 300px;">
      This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
    </div>
  </div>
</div>

Некалькі мэтаў

Аб'ект <button>або <a>можа паказваць і хаваць некалькі элементаў, спасылаючыся на іх з дапамогай селектара ў атрыбуты hrefабо . data-bs-targetНекалькі <button>або <a>могуць паказваць і хаваць элемент, калі кожны спасылаецца на яго са сваім атрыбутам hrefабоdata-bs-target

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.
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.
<p>
  <a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-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>

Даступнасць

Абавязкова дадайце aria-expandedэлемент кіравання. Гэты атрыбут яўна перадае бягучы стан складнага элемента, прывязанага да элемента кіравання праграмамі чытання з экрана і падобнымі дапаможнымі тэхналогіямі. Калі складны элемент зачынены па змаўчанні, атрыбут элемента кіравання павінен мець значэнне aria-expanded="false". Калі вы ўсталявалі згортваемы элемент адкрытым па змаўчанні з дапамогай showкласа, aria-expanded="true"замест гэтага ўсталюйце элемент кіравання. Убудова будзе аўтаматычна пераключаць гэты атрыбут на элеменце кіравання ў залежнасці ад таго, быў ці не адкрыты або закрыты згортваемы элемент (праз JavaScript або таму, што карыстальнік запусціў іншы элемент кіравання, таксама прывязаны да таго ж згортваемага элемента). Калі элемент HTML элемента кіравання не з'яўляецца кнопкай (напрыклад, <a>або <div>), атрыбутrole="button"трэба дадаць да элемента.

Калі ваш элемент кіравання арыентаваны на адзін згортваемы элемент - г.зн. data-bs-targetатрыбут паказвае на idселектар - вы павінны дадаць aria-controlsатрыбут да элемента кіравання, утрымліваючы idэлемент згортвання. Сучасныя праграмы чытання з экрана і падобныя дапаможныя тэхналогіі выкарыстоўваюць гэты атрыбут, каб даць карыстальнікам дадатковыя цэтлікі для навігацыі непасрэдна да самога разборнага элемента.

Звярніце ўвагу, што цяперашняя рэалізацыя Bootstrap не ахоплівае розныя дадатковыя ўзаемадзеянні з клавіятурай, апісаныя ў акардэонным шаблоне WAI-ARIA Authoring Practices 1.1 - вам трэба будзе ўключыць іх самастойна з карыстацкім JavaScript.

Сас

Пераменныя

$transition-collapse:         height .35s ease;
$transition-collapse-width:   width .35s ease;

Заняткі

Класы згортвання пераходу можна знайсці ў scss/_transitions.scss, паколькі яны выкарыстоўваюцца для некалькіх кампанентаў (згортванне і акардэон).

.collapse {
  &:not(.show) {
    display: none;
  }
}

.collapsing {
  height: 0;
  overflow: hidden;
  @include transition($transition-collapse);

  &.collapse-horizontal {
    width: 0;
    height: auto;
    @include transition($transition-collapse-width);
  }
}

Выкарыстанне

Плагін згортвання выкарыстоўвае некалькі класаў для апрацоўкі цяжкай працы:

  • .collapseхавае змест
  • .collapse.showпаказвае змест
  • .collapsingдадаецца, калі пераход пачынаецца, і выдаляецца, калі ён заканчваецца

Гэтыя класы можна знайсці ў _transitions.scss.

Праз атрыбуты дадзеных

Проста дадайце data-bs-toggle="collapse"і data-bs-targetда элемента, каб аўтаматычна прызначыць кіраванне адным або некалькімі складанымі элементамі. Атрыбут data-bs-targetпрымае селектар CSS для прымянення згортвання. Абавязкова дадайце клас collapseда разборнага элемента. Калі вы хочаце, каб ён быў адкрыты па змаўчанні, дадайце дадатковы клас show.

Каб дадаць у згортваемую вобласць кіраванне групамі, падобнае да акардэона, дадайце атрыбут data data-bs-parent="#selector". Для атрымання дадатковай інфармацыі глядзіце старонку акардэон .

Праз JavaScript

Уключыць уручную з дапамогай:

var collapseElementList = [].slice.call(document.querySelectorAll('.collapse'))
var collapseList = collapseElementList.map(function (collapseEl) {
  return new bootstrap.Collapse(collapseEl)
})

Параметры

Параметры могуць быць перададзены праз атрыбуты дадзеных або JavaScript. Для атрыбутаў дадзеных дадайце назву опцыі да data-bs-, як у data-bs-parent="".

Імя Тып Па змаўчанні Апісанне
parent селектар | Аб'ект jQuery | Элемент DOM false Калі пазначаны бацькоўскі элемент, то ўсе згортваемыя элементы пад пазначаным бацькоўскім элементам будуць зачыненыя, калі будзе паказаны гэты згортваемы элемент. (падобна паводзінам традыцыйнага акардэона - гэта залежыць ад cardкласа). Атрыбут павінен быць усталяваны на мэтавай разборнай вобласці.
toggle лагічны true Пераключае складны элемент пры выкліку

Метады

Асінхронныя метады і пераходы

Усе метады API асінхронныя і пачынаюць пераход . Яны вяртаюцца да абанента, як толькі пачынаецца пераход, але да яго заканчэння . Акрамя таго, выклік метаду пераходнага кампанента будзе ігнаравацца .

Для атрымання дадатковай інфармацыі глядзіце нашу дакументацыю па JavaScript .

Актывуе ваш кантэнт як складны элемент. Прымае дадатковыя параметры object.

Вы можаце стварыць згорнуты асобнік з дапамогай канструктара, напрыклад:

var myCollapse = document.getElementById('myCollapse')
var bsCollapse = new bootstrap.Collapse(myCollapse, {
  toggle: false
})
Метад Апісанне
toggle Пераключае складны элемент на паказны або схаваны. Вяртаецца да таго, хто выклікае, перш чым згортваемы элемент быў фактычна паказаны або схаваны (г.зн. да таго , як адбудзецца падзея shown.bs.collapseабо ).hidden.bs.collapse
show Паказвае разборны элемент. Вяртаецца да таго, хто выклікае, перш чым элемент, які згортваецца, быў фактычна паказаны (напрыклад, да shown.bs.collapseпадзеі).
hide Хавае разборны элемент. Вяртаецца да абанента да таго, як згорнуты элемент быў фактычна схаваны (напрыклад, да таго, як hidden.bs.collapseадбылася падзея).
dispose Разбурае калапс элемента. (Выдаляе захаваныя даныя ў элеменце DOM)
getInstance Статычны метад, які дазваляе вам атрымаць асобнік згортвання, звязаны з элементам DOM, вы можаце выкарыстоўваць яго так:bootstrap.Collapse.getInstance(element)
getOrCreateInstance Статычны метад, які вяртае згорнуты асобнік, звязаны з элементам DOM, або стварае новы ў выпадку, калі ён не быў ініцыялізаваны. Вы можаце выкарыстоўваць гэта так:bootstrap.Collapse.getOrCreateInstance(element)

Падзеі

Клас згортвання Bootstrap паказвае некалькі падзей для падключэння да функцыянальнасці згортвання.

Тып падзеі Апісанне
show.bs.collapse Гэта падзея запускаецца неадкладна пры showвыкліку метаду асобніка.
shown.bs.collapse Гэта падзея запускаецца, калі элемент згортвання робіцца бачным для карыстальніка (будзе чакаць завяршэння пераходаў CSS).
hide.bs.collapse Гэта падзея запускаецца адразу пасля hideвыкліку метаду.
hidden.bs.collapse Гэта падзея запускаецца, калі элемент згортвання быў схаваны ад карыстальніка (будзе чакаць завяршэння пераходаў CSS).
var myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', function () {
  // do something...
})