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>

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

Аб'ект <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ў якасці абгорткі.

Анімацыйны клішэ асуджаны, аніміраваны светскага жыцця абвінавачаны Тэры Рычардсан і кальмар. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Сняданак 3 воўчы месяц, час, сонца, алеква, паклала птушку на гэта, кальмары, кава адзінага паходжання, нулла, прыпускаецца, шорэдыч і інш. 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...
})