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 wolf moon officia aute, non cupidatat စကိတ်စီးခြင်း dolor နေ့လည်စာ။ အစားအစာထရပ်ကား quinoa nesciunt lab eiusmod နေ့လယ်စာ 3 wolf moon tempor, sunt aliqua သည် ငှက်တစ်ကောင်ကို ၎င်းပေါ်တွင် ပြည်ကြီးငါး တစ်ခုတည်း-မူရင်း ကော်ဖီ nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica၊ craft beer အလုပ်သမား wes anderson cred nesciunt sapiente ea proident။ ကြော်ငြာ vegan excepteur အသားသတ်သမား ဒု lomo။ Leggings occaecat လက်လုပ်လက်စား ဘီယာခင်းမှ စားပွဲသို့ ဂျင်းစိမ်း အနုသယ ပေါင်းစပ်ထားသော nesciunt သည် ၎င်းတို့ accusamus သည် ရေရှည်တည်တံ့ခိုင်မြဲသော 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-controlsid

Bootstrap ၏ လက်ရှိအကောင်အထည်ဖော်မှုသည် WAI-ARIA Authoring Practices 1.1 accordion ပုံစံ တွင်ဖော်ပြထားသော ကီးဘုတ် အပြန်အလှန်တုံ့ပြန်မှုများကို မဖုံးကွယ်ထားသင့်ကြောင်း သတိပြုပါ - ၎င်းတို့ကို စိတ်ကြိုက် JavaScript ဖြင့် သင်ကိုယ်တိုင် ထည့်သွင်းရန် လိုအပ်မည်ဖြစ်ပါသည်။

အသုံးပြုမှု

ပြိုကျသောပလပ်အင်သည် လေးလံသော ရုတ်သိမ်းခြင်းကို ကိုင်တွယ်ရန် အတန်းအနည်းငယ်ကို အသုံးပြုသည်-

  • .collapseအကြောင်းအရာကို ဝှက်ထားသည်။
  • .collapse.showအကြောင်းအရာကိုပြသသည်။
  • .collapsingအကူးအပြောင်းစတင်ချိန်တွင် ထည့်သွင်းပြီး ပြီးဆုံးသည့်အခါ ဖယ်ရှားသည်။

ဤအတန်းများကို တွင်တွေ့နိုင်ပါသည် _transitions.scss

ဒေတာဂုဏ်တော်များမှတဆင့်

data-toggle="collapse"တစ်ခု data-targetသို့မဟုတ် တစ်ခုထက်ပို၍ ပြိုလဲနိုင်သော ဒြပ်စင်များကို အလိုအလျောက် ထိန်းချုပ်သတ်မှတ်ရန် အစိတ်အပိုင်းသို့ ပေါင်းထည့်ရုံသာ ။ data-targetပြိုကျမှုကို အသုံးချရန် ရည်ညွှန်းချက်သည် CSS ရွေးချယ်မှုအား လက်ခံသည် ။ collapseတွဲနိုင်သော အစိတ်အပိုင်းသို့ အတန်းကို ထည့်သွင်းရန် သေချာပါစေ ။ ၎င်းကို ပုံသေဖွင့်လိုလျှင် နောက်ထပ်အတန်းကို ထည့်ပါ show

အကော်ဒီယံကဲ့သို့ အုပ်စုစီမံခန့်ခွဲမှုကို ပေါင်းစပ်နိုင်သော ဧရိယာသို့ ထည့်ရန်၊ ဒေတာရည်ညွှန်းချက်ကို ထည့်ပါ data-parent="#selector"။ လုပ်ဆောင်ချက်ကို ကြည့်ရန် ဒီမိုကို ကိုးကားပါ။

JavaScript မှတဆင့်

ကိုယ်တိုင်ဖွင့်ပါ-

$('.collapse').collapse()

ရွေးချယ်စရာများ

ရွေးချယ်မှုများကို data attribute သို့မဟုတ် JavaScript မှတဆင့်ဖြတ်သန်းနိုင်သည်။ data-ဒေတာရည်ညွှန်းချက်များအတွက် ၊ တွင်ပါရှိသည့်အတိုင်း ရွေးချယ်စရာအမည်ကို ပေါင်းထည့် ပါ data-parent=""

နာမည် ရိုက်ပါ။ ပုံသေ ဖော်ပြချက်
မိဘ ရွေးချယ်သူ | jQuery object | DOM ဒြပ်စင် အတုအယောင် မိဘကို ပံ့ပိုးပေးမည်ဆိုပါက၊ သတ်မှတ်ထားသော အုပ်ထိန်းမှုအောက်ရှိ ပြိုကျနိုင်သော အစိတ်အပိုင်းအားလုံးကို ဤအရာအား ပြသသည့်အခါ ပိတ်သွားပါမည်။ card(ရိုးရာအကော်ဒီယံအမူအကျင့်နှင့်ဆင်တူသည် - ဤသည် လူတန်းစား အပေါ် မူတည်သည် ) ။ ရည်ညွှန်းချက်ကို ပစ်မှတ်ကို ခေါက်သိမ်းနိုင်သော ဧရိယာပေါ်တွင် သတ်မှတ်ရပါမည်။
ပြောင်းရန် ဘူလီယံ မှန်ပါတယ်။ ခေါ်ဆိုမှုတွင် တွဲနိုင်သော အစိတ်အပိုင်းကို ပြောင်းပေးသည်။

နည်းလမ်းများ

Asynchronous နည်းလမ်းများနှင့် အသွင်ကူးပြောင်းမှုများ

API နည်းလမ်းအားလုံးသည် အ ညီအမျှ ဖြစ်ပြီး အကူးအပြောင်း တစ်ခု စတင်သည် ။ အကူးအပြောင်းစတင်သည်နှင့် မပြီးဆုံးမီတွင် ၎င်းတို့သည် ခေါ်ဆိုသူထံသို့ ပြန်သွားကြသည် ။ ထို့အပြင်၊ transitioning component တစ်ခုပေါ်တွင် method call ကို လျစ်လျူရှု ပါမည်။

နောက်ထပ်အချက်အလက်များအတွက် ကျွန်ုပ်တို့၏ 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.ပြိုကျသည်။ showသာဓကနည်းလမ်းကို ခေါ်သော အခါတွင် ဤဖြစ်ရပ်သည် ချက်ချင်း မီးလောင် ပါသည်။
ပြထားသည်.bs.ပြိုကျသည်။ ပြိုကျသည့်ဒြပ်စင်ကို အသုံးပြုသူမြင်အောင်ပြုလုပ်ပြီးသောအခါ (CSS အသွင်ကူးပြောင်းမှုများကို အပြီးသတ်ရန် စောင့်ပါမည်)။
hide.bs.ပြိုကျသည်။ hideနည်းလမ်းကို ခေါ်သော အခါတွင် ဤဖြစ်ရပ်ကို ချက်ချင်း ဖယ်ရှားသည်။
hidden.bs.collapse အသုံးပြုသူမှ ပြိုကျသည့်ဒြပ်စင်ကို ဝှက်ထားသောအခါ (CSS အသွင်ကူးပြောင်းမှုများကို အပြီးသတ်ရန် စောင့်ပါမည်)။
$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something...
})