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 ընտրիչով իր hrefկամ data-targetհատկանիշում: Բազմաթիվ <button>կամ <a>կարող են ցույց տալ և թաքցնել տարրը, եթե յուրաքանչյուրն այն հղում է անում իր hrefկամ data-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 adsquid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Սննդի բեռնատար quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua վրան մի թռչուն դրեց կաղամար մեկ ծագման սուրճ nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Գովազդ բուսակերների բացառիկ մսագործի տեղակալ Լոմո. Սռնապաններ occaecat craft գարեջրի ֆերմա-սեղան, հում ջինսե էսթետիկ սինթեզ, դուք հավանաբար չեք լսել դրանց մասին 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 տարրը կոճակ չէ (օրինակ՝ an <a>կամ <div>), հատկանիշըrole="button"պետք է ավելացվի տարրին:

Եթե ​​ձեր կառավարման տարրը թիրախավորում է մեկ ծալվող տարր, այսինքն՝ data-targetհատկանիշը մատնացույց է անում idընտրիչին, դուք պետք է ավելացնեք aria-controlsատրիբուտը կառավարման տարրին, որը պարունակում idէ ծալվող տարրը: Էկրանի ժամանակակից ընթերցիչները և նմանատիպ օժանդակ տեխնոլոգիաները օգտագործում են այս հատկանիշը՝ օգտատերերին լրացուցիչ դյուրանցումներ տրամադրելու համար՝ անմիջապես դեպի ծալվող տարրը նավարկելու համար:

Նկատի ունեցեք, որ Bootstrap-ի ներկայիս ներդրումը չի ներառում ստեղնաշարի տարբեր փոխազդեցությունները, որոնք նկարագրված են WAI-ARIA Authoring Practices 1.1 ակորդեոնի ձևանմուշում . դուք պետք է դրանք ներառեք հատուկ JavaScript-ով:

Օգտագործումը

Փլուզման պլագինը օգտագործում է մի քանի դասեր՝ ծանր բարձրացնելու համար.

  • .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.bs.collapse Այս իրադարձությունը գործարկվում է անմիջապես, երբ hideմեթոդը կանչվում է:
hidden.bs.collapse Այս իրադարձությունը գործարկվում է, երբ օգտատիրոջից թաքցված է ծալման տարրը (կսպասի CSS-ի անցումների ավարտին):
$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something...
})