Свиване

Как работи

Плъгинът за свиване на JavaScript се използва за показване и скриване на съдържание. Бутоните или котвите се използват като тригери, които се нанасят на конкретни елементи, които превключвате. Свиването на елемент ще анимира heightот текущата му стойност до 0. Като се има предвид как CSS обработва анимациите, не можете да използвате paddingвърху .collapseелемент. Вместо това използвайте класа като независим обвиващ елемент.

Пример

Щракнете върху бутоните по-долу, за да покажете или скриете друг елемент чрез промени в класа:

• .collapseскрива съдържанието
• .collapsingсе прилага по време на преходи
• .collapse.showпоказва съдържание

Като цяло препоръчваме да използвате бутон с data-bs-targetатрибута. Въпреки че не се препоръчва от семантична гледна точка, можете също да използвате връзка с hrefатрибута (и role="button"). И в двата случая data-bs-toggle="collapse"се изисква.

<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и задайте a widthвърху непосредствения дъщерен елемент. Чувствайте се свободни да напишете свой собствен персонализиран Sass, да използвате вградени стилове или да използвате нашите помощни програми за ширина .

<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>

Множество цели

A <button>или <a>може да показва и скрива множество елементи, като ги препраща със селектор в своя hrefили data-bs-targetатрибут. Множество <button>или <a>могат да показват и скриват елемент, ако всеки го препраща към своя hrefили data-bs-targetатрибут

<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 не покрива различните незадължителни взаимодействия с клавиатурата, описани в акордеонния модел на ръководството за авторски практики на ARIA - ще трябва да ги включите сами с персонализиран 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

Активирайте ръчно с:

const collapseElementList = document.querySelectorAll('.collapse')
const collapseList = [...collapseElementList].map(collapseEl => new bootstrap.Collapse(collapseEl))

Настроики

Тъй като опциите могат да се предават чрез атрибути на данни или JavaScript, можете да добавите име на опция към data-bs-, както в data-bs-animation="{value}". Уверете се, че сте променили типа регистър на името на опцията от „ camelCase ” на „ kebab-case ”, когато предавате опциите чрез атрибути на данни. Например използвайте data-bs-custom-class="beautifier"вместо data-bs-customClass="beautifier".

От Bootstrap 5.2.0 всички компоненти поддържат експериментален резервиран атрибут на данни, data-bs-configкойто може да съдържа проста конфигурация на компонент като JSON низ. Когато даден елемент има атрибути data-bs-config='{"delay":0, "title":123}'и data-bs-title="456", крайната titleстойност ще бъде 456и отделните атрибути на данни ще заменят стойностите, дадени на data-bs-config. В допълнение, съществуващите атрибути на данни могат да съдържат JSON стойности като data-bs-delay='{"show":0,"hide":150}'.

Методи

Активира вашето съдържание като сгъваем елемент. Приема опции по избор object.

Можете да създадете екземпляр за свиване с конструктора, например:

const bsCollapse = new bootstrap.Collapse('#myCollapse', {
  toggle: false
})

събития

Класът за свиване на Bootstrap разкрива няколко събития за свързване към функционалността за свиване.

const myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', event => {
  // do something...
})