Փլուզվել

Միացրեք ձեր նախագծում բովանդակության տեսանելիությունը մի քանի դասերի և մեր 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>

Հորիզոնական

The collapse plugin-ն աջակցում է նաև հորիզոնական փլուզմանը: Ավելացրե՛ք .widthմոդիֆիկատորի դասը, որպեսզի անցում կատարեք և տեղադրեք a- ն անմիջական երեխայի տարրի վրա width: Ազատորեն գրեք ձեր սեփական Sass-ը, օգտագործեք ներկառուցված ոճեր կամ օգտագործեք մեր լայնության կոմունալ ծառայությունները :heightwidth

<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"փոխարենը դրեք կառավարում: Փլագինը ավտոմատ կերպով կփոխի այս հատկանիշը հսկողության վրա՝ հիմնվելով ծալվող տարրի բացման կամ փակման վրա (JavaScript-ի միջոցով, կամ այն ​​պատճառով, որ օգտատերը գործարկել է մեկ այլ կառավարման տարր, որը նույնպես կապված է նույն ծալվող տարրի հետ): Եթե ​​կառավարման տարրի HTML տարրը կոճակ չէ (օրինակ՝ an <a>կամ <div>), հատկանիշըrole="button"պետք է ավելացվի տարրին:

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

Նկատի ունեցեք, որ Bootstrap-ի ներկայիս ներդրումը չի ներառում ստեղնաշարի տարբեր փոխազդեցությունները, որոնք նկարագրված են ARIA Authoring Practices Guide-ի ակորդեոնի ձևանմուշում . դուք պետք է դրանք ներառեք հատուկ 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="".

Մեթոդներ

.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-ի փլուզման դասը բացահայտում է մի քանի իրադարձություններ՝ փլուզման գործառույթին միանալու համար:

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