Згарнуць

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

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

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

Прыклад

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

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

Як правіла, мы рэкамендуем выкарыстоўваць кнопку з data-targetатрыбутам. Хоць гэта не рэкамендуецца з семантычнага пункту гледжання, вы таксама можаце выкарыстоўваць спасылку з hrefатрыбутам (і 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і ўсталюйце для widthнепасрэднага даччынага элемента. Не саромейцеся пісаць свой уласны Sass, выкарыстоўваць убудаваныя стылі або выкарыстоўваць нашы ўтыліты шырыні .

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

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

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

<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 элемента кіравання не з'яўляецца кнопкай (напрыклад, <a>або <div>), атрыбутrole="button"трэба дадаць да элемента.

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

Звярніце ўвагу, што цяперашняя рэалізацыя Bootstrap не ахоплівае розныя ўзаемадзеянні з клавіятурай, апісаныя ў ARIA Authoring Practices Guide акардэонны шаблон - вам трэба будзе ўключыць іх самастойна з карыстацкім 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="".

Метады

.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 паказвае некалькі падзей для падключэння да функцыянальнасці згортвання.

$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something...
})