سقوط

د څو ټولګیو او زموږ د جاواسکریپټ پلگ انونو سره ستاسو د پروژې په اوږدو کې د مینځپانګې لید بدل کړئ.

څنګه کار کوي

د جاواسکریپټ سقوط پلگ ان د مینځپانګې ښودلو او پټولو لپاره کارول کیږي. تڼۍ یا لنگرونه د محرکونو په توګه کارول کیږي چې د ځانګړو عناصرو سره نقشه شوي چې تاسو یې بدل کړئ. د یو عنصر ماتول به 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د بدلولو لپاره د بدلون کونکي ټولګي 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>

څو هدفونه

A <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"نو پرځای یې کنټرول تنظیم کړئ. پلگ ان به په اوتومات ډول دا خاصیت په کنټرول کې د دې پراساس بدل کړي چې ایا د سقوط وړ عنصر خلاص شوی یا بند شوی دی (د جاواسکریپټ له لارې ، یا دا چې کارونکي بل کنټرول عنصر رامینځته کړی چې د ورته سقوط وړ عنصر سره تړاو لري). که چیرې د کنټرول عنصر HTML عنصر تڼۍ نه وي (د مثال په توګه، یو <a>یا <div>)، خاصیتrole="button"باید عنصر ته اضافه شي.

که ستاسو د کنټرول عنصر یو واحد مات کیدونکی عنصر په نښه کوي - د بیلګې په توګه data-targetځانګړتیا یو idانتخاب کونکي ته په ګوته کوي - تاسو باید aria-controlsد کنټرول عنصر ته خاصیت اضافه کړئ ، چې idد سقوط وړ عنصر لري. عصري سکرین لوستونکي او ورته مرستندویه ټیکنالوژي د دې ځانګړتیا څخه کار اخلي ترڅو کاروونکو ته اضافي شارټ کټونه چمتو کړي ترڅو مستقیم د سقوط وړ عنصر ته لاړ شي.

په یاد ولرئ چې د بوټسټریپ اوسنۍ پلي کول د کیبورډ مختلف تعاملات نه پوښي چې د ARIA لیکوالۍ طرزالعمل لارښود اکارډین نمونه کې تشریح شوي - تاسو به اړتیا ولرئ دا پخپله د دودیز جاوا سکریپټ سره شامل کړئ.

کارول

د سقوط پلگ ان د دروند پورته کولو اداره کولو لپاره څو ټولګي کاروي:

• .collapseمواد پټوي
• .collapse.showمنځپانګه ښيي
• .collapsingاضافه کیږي کله چې لیږد پیل شي، او کله چې پای ته ورسیږي لرې کیږي

دا ټولګي په کې موندل کیدی شي _transitions.scss.

د معلوماتو ځانګړتیاو له لارې

یوازې عنصر ته اضافه کړئ data-toggle="collapse"او a data-targetپه اتوماتيک ډول د یو یا ډیرو ماتیدو وړ عناصرو کنټرول وټاکئ. خاصیت د data-targetCSS انتخاب کونکی مني چې د سقوط پلي کولو لپاره. ډاډ ترلاسه کړئ چې ټولګي collapseد سقوط وړ عنصر ته اضافه کړئ. که تاسو غواړئ چې دا په ډیفالټ خلاص شي، اضافي ټولګي اضافه کړئ show.

د تړل کیدو وړ ساحې ته د اکارډین په څیر ګروپ مدیریت اضافه کولو لپاره ، د ډیټا خاصیت اضافه کړئ data-parent="#selector". ډیمو ته مراجعه وکړئ ترڅو دا په عمل کې وګورئ.

د جاواسکریپټ له لارې

په لاسي ډول د دې سره فعال کړئ:

$('.collapse').collapse()

اختیارونه

اختیارونه د ډیټا ځانګړتیاو یا جاواسکریپټ له لارې لیږدول کیدی شي. د ډیټا ځانګړتیاو لپاره، د اختیار نوم سره ضمیمه کړئ 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')

د یو عنصر سقوط له منځه وړي.

پیښې

د بوټسټریپ سقوط ټولګي د سقوط فعالیت ته د رسیدو لپاره یو څو پیښې افشا کوي.

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