Source

Жыйрату

Бірнеше сыныптар мен JavaScript плагиндері арқылы жобаңыздағы мазмұнның көріну мүмкіндігін ауыстырыңыз.

Бұл қалай жұмыс істейді

Тасымалдау JavaScript плагині мазмұнды көрсету және жасыру үшін пайдаланылады. Түймешіктер немесе якорьдер сіз ауыстыратын арнайы элементтермен салыстырылатын триггерлер ретінде пайдаланылады. Элементті жию heightоның ағымдағы мәнінен мәнін жандандырады 0. paddingCSS анимацияларды қалай өңдейтінін ескере отырып , .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>немесе бірнеше элементтерді JQuery селекторымен немесе төлсипатта <a>сілтеме жасау арқылы көрсете және жасыра алады . Бірнеше немесе элементті көрсету және жасыру мүмкін, егер олардың әрқайсысы оған өзінің немесе төлсипаты арқылы сілтеме жасасаhrefdata-target<button><a>hrefdata-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 kliche reprehenderit, enim eiusmod жоғары өмірді айыптады Терри Ричардсон және кальмар. 3 қасқыр ай officia aute, емес cupidatat скейтборд dolor brunch. Азық-түлік жүк көлігі quinoa nesciunt laborum eiusmod. Brunch 3 Wolf Moon tempor, sunt aliqua оған құс қойды кальмар жалғыз шыққан кофе nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, қолөнер сырасының зертханасы Вес Андерсон Cred nesciunt sapiente ea proident. Вегетариандық ерекше қасапшы вице-ломо. Leggings occaecat қолөнер сыра фермасынан үстелге, шикі джинсы эстетикалық синтетикалық нессиунт, сіз олар туралы accusamus labore тұрақты 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мазмұнын жасырады
  • .collapse.showмазмұнын көрсетеді
  • .collapsingауысу басталған кезде қосылады және ол аяқталған кезде жойылады

Бұл сыныптарды мына жерден табуға болады _transitions.scss.

Деректер атрибуттары арқылы

Бір немесе бірнеше жиналмалы элементтерді басқаруды автоматты түрде тағайындау үшін элементке жай ғана data-toggle="collapse"және a қосыңыз . data-targetТөлсипат data-targetқысқартуды қолдану үшін CSS селекторын қабылдайды. collapseСыныпты жиналмалы элементке қосуды ұмытпаңыз . Оның әдепкі бойынша ашылғанын қаласаңыз, қосымша сыныпты қосыңыз show.

Жиналмалы аймаққа аккордеон тәрізді топты басқаруды қосу үшін деректер төлсипатын қосыңыз 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.collapse Бұл оқиға құлау элементі пайдаланушыға көрінетін болған кезде іске қосылады (CSS ауысуларының аяқталуын күтеді).
жасыру.б.құластыру Бұл оқиға hideәдіс шақырылған кезде бірден іске қосылады.
жасырын.б.құла Бұл оқиға пайдаланушыдан жиырылған элемент жасырылған кезде іске қосылады (CSS ауысуларының аяқталуын күтеді). 
$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something...
})