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 تاللىغۇچ بىلەن پايدىلىنىش ئارقىلىق كۆرسىتىپ ۋە يوشۇرالايدۇ . كۆپ ياكى بىر ئېلېمېنتنى ھەر بىرسى ئۆزىنىڭ ياكى خاسلىقى بىلەن كۆرسەتسە ياكى كۆرسىتىپ بېرەلەيدۇ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 cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 بۆرە ئاي ئىش بېجىرىش ئورنى ، لوڭقا تېيىلىش تاختىسى دولور غولى. يېمەكلىك يۈك ماشىنىسى quinoa nesciunt laborum eiusmod. برۇنچ 3 بۆرە ئاي تېمپېراتۇرىسى ، sunt aliqua ئۇنىڭغا بىر قۇش قويدى. Nihil anim keffiyeh helvetica ، ھۈنەر-سەنئەت پىۋا ئىشچىسى wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. لەۋ سۇرۇخ ھۈنەر-سەنئەت پىۋا دېھقانچىلىق مەيدانىدىن ئۈستەلگە ، خام دېنىم ئېستېتىك بىرىكمە نەسىللىك ، بەلكىم سىز ئۇلارنىڭ ئەيىبلەنگەنلىكىنى ئاڭلاپ باقمىغان بولۇشىڭىز مۇمكىن.

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

شۇنىڭغا دىققەت قىلىڭكى ، Bootstrap نىڭ نۆۋەتتىكى يولغا قويۇلۇشى WAI-ARIA ئاپتورلۇق ئەمەلىيىتى 1.1 ئاككوردىيون ئەندىزىسىدە تەسۋىرلەنگەن ھەر خىل كۇنۇپكا تاختىسىنى ئۆز ئىچىگە ئالمايدۇ - بۇلارنى ئۆزىڭىز JavaScript بىلەن ئۆز ئىچىگە ئېلىشىڭىز كېرەك.

ئىشلىتىش

يىمىرىلىش قىستۇرمىسى بىر نەچچە سىنىپتىن پايدىلىنىپ ئېغىر كۆتۈرۈشنى بىر تەرەپ قىلىدۇ:

  • .collapseمەزمۇننى يوشۇرىدۇ
  • .collapse.showمەزمۇننى كۆرسىتىدۇ
  • .collapsingئۆتكۈنچى باشلانغاندا قوشۇلىدۇ ، ئاخىرلاشقاندا چىقىرىۋېتىلىدۇ

بۇ دەرسلەرنى تاپقىلى بولىدۇ _transitions.scss.

سانلىق مەلۇمات خاسلىقى ئارقىلىق

ئېلېمېنتقا بىر ياكى data-toggle="collapse"بىر data-targetقانچە قاتلىنىدىغان ئېلېمېنتنى كونترول قىلىشنى ئاپتوماتىك تەقسىملەڭ. خاسلىق data-targetيىمىرىلىشنى قوللىنىش ئۈچۈن CSS تاللىغۇچنى قوبۇل قىلىدۇ. collapseدەرسنى قاتلىنىدىغان ئېلېمېنتقا قوشۇشقا كاپالەتلىك قىلىڭ . ئەگەر سۈكۈتتىكى ھالەتتە ئېچىشنى ئويلىسىڭىز ، قوشۇمچە دەرسنى قوشۇڭ show.

ئاككوردىيونغا ئوخشاش گۇرۇپپا باشقۇرۇشنى قاتلىنىدىغان رايونغا قوشۇش ئۈچۈن ، سانلىق مەلۇمات خاسلىقىنى قوشۇڭ data-parent="#selector". بۇنى ھەرىكەتتە كۆرۈش ئۈچۈن كۆرسەتمە دىن پايدىلىنىڭ.

JavaScript ئارقىلىق

قولدا قوزغىتىڭ:

$('.collapse').collapse()

تاللانما

تاللانمىلارنى سانلىق مەلۇمات خاسلىقى ياكى JavaScript ئارقىلىق يەتكۈزگىلى بولىدۇ. سانلىق مەلۇمات خاسلىقى ئۈچۈن ، تاللاش نامىغا data-ئوخشاش data-parent="".

ئىسمى تىپ سۈكۈتتىكى چۈشەندۈرۈش
ئاتا-ئانا تاللىغۇچ | jQuery ئوبيېكتى | DOM ئېلمىنتى false ئەگەر ئاتا-ئانا تەمىنلەنگەن بولسا ، بۇ قاتلىنىدىغان نەرسە كۆرسىتىلگەندە كۆرسىتىلگەن ئاتا-ئانىنىڭ ئاستىدىكى بارلىق قاتلىنىدىغان ئېلېمېنتلار تاقىلىدۇ. (ئەنئەنىۋى ئاككوردىيون ھەرىكىتىگە ئوخشايدۇ - بۇ cardسىنىپقا باغلىق). خاسلىق نىشاننى قاتلىنىدىغان رايونغا تەڭشىشى كېرەك.
toggle boolean true دەۋەتتىكى قاتلىنىدىغان ئېلېمېنتنى بىر تەرەپ قىلىدۇ

Methods

ماس قەدەمسىز ئۇسۇل ۋە ئۆتكۈنچى

بارلىق API ئۇسۇللىرى ماس قەدەمسىز بولۇپ ، ئۆتكۈنچى باسقۇچنى باشلايدۇ . ئۇلار بۇرۇلۇش باشلانغان ھامان ، ئۇ ئاخىرلاشماي تۇرۇپلا تېلېفون قىلغۇچىغا قايتىپ كېلىدۇ . بۇنىڭدىن باشقا ، ئۆتكۈنچى زاپچاسنى چاقىرىش ئۇسۇلىغا سەل قارىلىدۇ .

تېخىمۇ كۆپ ئۇچۇرغا ئېرىشىش ئۈچۈن JavaScript ھۆججىتىمىزنى كۆرۈڭ .

.collapse(options)

مەزمۇنلىرىڭىزنى قاتلىنىدىغان ئېلېمېنت سۈپىتىدە ئاكتىپلايدۇ. ئىختىيارى تاللاشلارنى قوبۇل قىلىدۇ object.

$('#myCollapsible').collapse({
  toggle: false
})

.collapse('toggle')

كۆرسىتىلىدىغان ياكى يوشۇرۇنغان قاتلىنىدىغان ئېلېمېنتنى توغرىلايدۇ. قاتلىنىدىغان ئېلېمېنت ئەمەلىيەتتە كۆرسىتىلىش ياكى يوشۇرۇلۇشتىن بۇرۇن (يەنى ھادىسە ياكى ھادىسە يۈز بېرىشتىن بۇرۇن) دەۋەتچىگە قايتىدۇ .shown.bs.collapsehidden.bs.collapse

.collapse('show')

قاتلىنىدىغان ئېلېمېنتنى كۆرسىتىدۇ. قاتلىنىدىغان ئېلېمېنت ئەمەلىيەتتە كۆرسىتىلىشتىن بۇرۇن (يەنى ۋەقە يۈز بېرىشتىن بۇرۇن) دەۋەتچىگە قايتىدۇ .shown.bs.collapse

.collapse('hide')

قاتلىنىدىغان ئېلېمېنتنى يوشۇرىدۇ. قاتلىنىدىغان ئېلېمېنت ئەمەلىيەتتە يوشۇرۇنۇشتىن بۇرۇن (يەنى hidden.bs.collapseۋەقە يۈز بېرىشتىن بۇرۇن) دەۋەتچىگە قايتىدۇ.

.collapse('dispose')

بىر ئېلېمېنتنىڭ يىمىرىلىشىنى يوقىتىدۇ.

Events

Bootstrap نىڭ يىمىرىلىش سىنىپى يىمىرىلىش ئىقتىدارىغا باغلانغان بىر قانچە ھادىسىنى ئاشكارىلىدى.

پائالىيەت تىپى چۈشەندۈرۈش
show.bs.collapse showمىسال ئۇسۇلى چاقىرىلغاندا بۇ ھادىسە دەرھال ئېتىلىدۇ .
shown.bs.collapse بۇ ھادىسە ئىشلەتكۈچىگە يىمىرىلىش ئېلېمېنتى كۆرۈنگەندە ئېتىلىدۇ (CSS ئۆتكۈنچى باسقۇچنىڭ تاماملىنىشىنى ساقلايدۇ).
hide.bs.collapse بۇ hideئۇسۇل ئۇسۇل چاقىرىلغاندا دەرھال ئېتىۋېتىلىدۇ.
hidden.bs.collapse بۇ ھادىسە ئىشلەتكۈچىدىن يىمىرىلىش ئېلېمېنتى يوشۇرۇلغاندا (CSS ئۆتكۈنچى باسقۇچنىڭ تاماملىنىشىنى ساقلايدۇ).
$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something...
})