يىمىرىلىش

بىر قانچە سىنىپ ۋە JavaScript قىستۇرمىلىرىمىز ئارقىلىق تۈرنىڭ مەزمۇنىنىڭ كۆرۈنۈشچانلىقىنى توغرىلاڭ.

قانداق ئىشلەيدۇ

يىمىرىلگەن JavaScript قىستۇرمىسى مەزمۇننى كۆرسىتىش ۋە يوشۇرۇش ئۈچۈن ئىشلىتىلىدۇ. كۇنۇپكا ياكى لەڭگەر سىز ئالماشتۇرغان ئالاھىدە ئېلېمېنتلارغا سىزىلغان قوزغاتقۇچ سۈپىتىدە ئىشلىتىلىدۇ. heightبىر ئېلېمېنتنىڭ يىمىرىلىشى ئۇنىڭ ھازىرقى قىممىتىدىن جانلىنىدۇ 0. CSS نىڭ كارتوننى قانداق بىر تەرەپ قىلىدىغانلىقىنى نەزەردە تۇتقاندا ، paddingئېلېمېنتنى .collapseئىشلىتەلمەيسىز. ئۇنىڭ ئورنىغا ، سىنىپنى مۇستەقىل ئوراش ئېلېمېنتى قىلىپ ئىشلىتىڭ.

مىسال

تۆۋەندىكى كۇنۇپكىلارنى چېكىپ سىنىپ ئۆزگەرتىش ئارقىلىق باشقا ئېلېمېنتنى يوشۇرۇش ۋە يوشۇرۇش:

• .collapseمەزمۇننى يوشۇرىدۇ
• .collapsingئۆتكۈنچى مەزگىلدە قوللىنىلىدۇ
• .collapse.showمەزمۇننى كۆرسىتىدۇ

ئادەتتە ، data-targetخاسلىقى بار كۇنۇپكىنى ئىشلىتىشنى تەۋسىيە قىلىمىز. مەنە نۇقتىسىدىن تەۋسىيە قىلىنمىسىمۇ ، hrefخاسلىق (ۋە a 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ئالماشتۇرۇش سىنىپى قوشۇڭ ھەمدە دەرھال بالا ئېلېمېنتىغا تەڭشەڭ . ئۆزىڭىزنىڭ خاس Sass نى يېزىڭ ، ئىچكى ئۇسلۇبنى ئىشلىتىڭ ياكى كەڭلىكىمىزنى ئىشلىتىڭ .widthheightwidth

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

كۆپ نىشان

A <button>ياكى بىر قانچە ئېلېمېنتنى ئۇنىڭ ياكى خاسلىقىدىكى <a>JQuery تاللىغۇچ بىلەن كۆرسىتىپ كۆرسىتىپ يوشۇرۇپ قويالايدۇ . كۆپ ياكى بىر ئېلېمېنتنى ھەر بىرسى ئۆزىنىڭ ياكى خاسلىقى بىلەن پايدىلانسا كۆرسىتىپ بېرەلەيدۇ ۋە يوشۇرالايدۇhrefdata-target<button><a>hrefdata-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-controlsid

شۇنىڭغا دىققەت قىلىڭكى ، Bootstrap نىڭ نۆۋەتتىكى يولغا قويۇلۇشى ARIA ئاپتورلۇق مەشغۇلات قوللانمىسى ئاككوردىيون ئەندىزىسىدە تەسۋىرلەنگەن ھەر خىل كۇنۇپكا تاختىسىنى ئۆز ئىچىگە ئالمايدۇ - بۇلارنى ئۆزىڭىز 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="".

Methods

.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 نىڭ يىمىرىلىش سىنىپى يىمىرىلىش ئىقتىدارىغا باغلانغان بىر قانچە ھادىسىنى ئاشكارىلىدى.

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