Source

Свиване

Превключете видимостта на съдържанието във вашия проект с няколко класа и нашите плъгини за JavaScript.

Как работи

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

Анимационният ефект на този компонент зависи от prefers-reduced-motionмедийната заявка. Вижте раздела за намалено движение в нашата документация за достъпност .

Пример

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

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

Можете да използвате връзка с hrefатрибута или бутон с data-targetатрибута. И в двата случая data-toggle="collapse"се изисква.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. 
<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">
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  </div>
</div>

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

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

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. 
<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">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
      </div>
    </div>
  </div>
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample2">
      <div class="card card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
      </div>
    </div>
  </div>
</div>

Пример за акордеон

Използвайки компонента на картата , можете да разширите поведението на свиване по подразбиране, за да създадете акордеон. За да постигнете правилно стила на акордеон, не забравяйте да използвате .accordionкато обвивка.

Anim pariatur cliche reprehenderit, anim eiusmod high life actamus Тери Ричардсън и калмари. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Камион за храна quinoa nesciunt laborum eiusmod. Брънч 3 wolf moon tempor, sunt aliqua put a bird on it калмари кафе с един произход nulla acceptenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Реклама веган освен месар заместник ломо. Клинове occaecat занаятчийска бира от ферма до маса, суров деним, естетичен синтетичен синтетичен звук, вероятно не сте чували за тях, акузамус, труд, устойчив VHS.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. 
<div class="accordion" id="accordionExample">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h2 class="mb-0">
        <button class="btn btn-link" 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">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingTwo">
      <h2 class="mb-0">
        <button class="btn btn-link 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">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingThree">
      <h2 class="mb-0">
        <button class="btn btn-link 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">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </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 не покрива различните взаимодействия с клавиатурата, описани в акордеонния модел WAI-ARIA Authoring Practices 1.1 - ще трябва да ги включите сами с персонализиран 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 методи са асинхронни и стартират преход . Те се връщат при повикващия веднага щом преходът започне, но преди да приключи . В допълнение, извикване на метод на преходен компонент ще бъде игнорирано .

Вижте нашата 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.bs.collapse Това събитие се задейства веднага, когато showсе извика методът на екземпляра.
показано.bs.свиване Това събитие се задейства, когато елементът на свиване е направен видим за потребителя (ще изчака CSS преходите да завършат).
hide.bs.collapse Това събитие се задейства веднага след hideизвикване на метода.
hidden.bs.collapse Това събитие се задейства, когато елемент на свиване е скрит от потребителя (ще изчака CSS преходите да завършат). 
$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something...
})