Hāneʻe

E hoʻololi i ka ʻike ʻana o ka ʻike ma kāu papahana me kekahi mau papa a me kā mākou JavaScript plugins.

Pehea e hana ai

Hoʻohana ʻia ka plugin JavaScript collapse e hōʻike a hūnā i ka ʻike. Hoʻohana ʻia nā pihi a i ʻole nā ​​heleuma e like me nā mea hoʻomaka i palapala ʻia i nā mea kikoʻī āu e hoʻololi ai. ʻO ka hāʻule ʻana o kahi mea e hoʻolalelale i ka heightwaiwai mai kona waiwai i kēia manawa i 0. Hāʻawi ʻia pehea e mālama ai ʻo CSS i nā animation, ʻaʻole hiki iā ʻoe ke hoʻohana paddingma kahi .collapsemea. Akā, e hoʻohana i ka papa ma ke ʻano he mea hoʻopili kūʻokoʻa.

Laʻana

Kaomi i nā pihi ma lalo nei e hōʻike a hūnā i kekahi mea ma o nā hoʻololi papa:

• .collapsehuna mea
• .collapsinghoʻohana ʻia i ka wā hoʻololi
• .collapse.showhōʻike maʻiʻo

ʻO ka maʻamau, manaʻo mākou e hoʻohana i kahi pihi me ke data-targetʻano. ʻOiai ʻaʻole ʻōlelo ʻia mai kahi manaʻo semantic, hiki iā ʻoe ke hoʻohana i kahi loulou me ke hrefʻano (a me kahi role="button"). I nā hihia ʻelua, data-toggle="collapse"pono ka mea.

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

Kaupae

Kākoʻo pū ka plugin collapse i ka hāʻule ʻana o ka pae. E hoʻohui i ka .widthpapa hoʻololi e hoʻololi i ka widthma kahi o heighta hoʻonoho i kahi widthma luna o ka mea keiki koke. E ʻoluʻolu e kākau i kāu Sass maʻamau, e hoʻohana i nā ʻano inline, a i ʻole e hoʻohana i kā mākou mau pono ākea .

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

Nā pahu hopu lehulehu

Hiki iā A a i <button>ʻole <a>ke hōʻike a hūnā i nā mea he nui ma ke kuhikuhi ʻana iā lākou me kahi mea koho JQuery ma kāna ʻano a i hrefʻole data-targetke ʻano. Nui <button>a <a>hiki ke hōʻike a hūnā i kahi mea inā e kuhikuhi kēlā me kēia me kā lākou a i hrefʻole data-targetʻano

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

Laʻana Accordion

Ke hoʻohana nei i ka ʻāpana kāleka , hiki iā ʻoe ke hoʻolōʻihi i ka hana hāʻule paʻamau e hana i kahi accordion. No ka hoʻokō pono ʻana i ke ʻano accordion, e ʻoluʻolu e hoʻohana .accordionma ke ʻano he wīwī.

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

Hiki ke komo

E hōʻoia e hoʻohui aria-expandedi ka mea hoʻomalu. Hōʻike maopopo kēia ʻano i ke kūlana o kēia manawa o ka mea hiki ke hoʻopili ʻia i ka mana i ka nānā ʻana i nā mea heluhelu a me nā ʻenehana kōkua like. Inā pani ʻia ka mea hiki ke hoʻoheheʻe ʻia ma ke ʻano paʻamau, pono e loaʻa i ke ʻano o ka mea mana ka waiwai o aria-expanded="false". Inā ua hoʻonoho ʻoe i ka mea hiki ke hoʻoheheʻe ʻia e wehe ʻia ma ka hoʻohana ʻana i ka showpapa, e hoʻonoho aria-expanded="true"ma ka mana. E hoʻololi ʻokoʻa ka plugin i kēia ʻano ma luna o ka mana e pili ana i ka wehe ʻana a i ʻole ka pani ʻana o ka mea collapsible (ma o JavaScript, a i ʻole no ka mea hoʻohana ka mea hoʻohana i kahi mea mana ʻē aʻe i hoʻopaʻa ʻia i ka mea like ʻole). Inā ʻaʻole he pihi ka mea HTML o ka mea hoʻomalu (e laʻa, he a i <a>ʻole <div>), ka ʻanorole="button"pono e hoʻohui i ka mea.

Inā e huli ana kāu mea hoʻomalu i hoʻokahi mea hiki ke hoʻoheheʻe ʻia - ʻo ia hoʻi ke data-targetkuhikuhi nei ka ʻano i kahi idmea koho - pono ʻoe e hoʻohui i ka aria-controlsʻano i ka mea hoʻomalu, i loko ido ka mea hiki ke collapsible. Hoʻohana ka poʻe heluhelu ʻaoʻao o kēia wā a me nā ʻenehana kōkua like i kēia ʻano e hāʻawi i nā mea hoʻohana i nā ʻaoʻao pōkole hou e hoʻokele pololei i ka mea hiki ke collapsible ponoʻī.

E hoʻomaopopo ʻaʻole i uhi ʻia ka hoʻokō ʻana o Bootstrap i nā pānaʻi kīwī like ʻole i wehewehe ʻia ma ka ARIA Authoring Practices Guide accordion pattern - pono ʻoe e hoʻokomo iā ʻoe iho me ka JavaScript maʻamau.

Hoʻohana

Hoʻohana ka collapse plugin i kekahi mau papa e hoʻokō i ka hāpai kaumaha:

• .collapsehūnā i ka ʻike
• .collapse.showhōʻike i ka ʻike
• .collapsinghoʻohui ʻia i ka wā e hoʻomaka ai ka hoʻololi, a wehe ʻia i ka wā e pau ai

Hiki ke loaʻa kēia mau papa ma _transitions.scss.

Ma o nā hiʻohiʻona ʻikepili

E hoʻohui wale data-toggle="collapse"a me kahi data-targeti ka mea e hāʻawi ʻakomi i ka mana o hoʻokahi a ʻoi aku paha nā mea hiki ke collapsible. data-targetʻAe ka ʻano i kahi mea koho CSS e hoʻopili ai i ka hāʻule . E hōʻoia e hoʻohui i ka papa collapsei ka mea hiki ke collapsible. Inā makemake ʻoe e wehe paʻamau, e hoʻohui i ka papa hou show.

No ka hoʻohui ʻana i ka hoʻokele hui e like me ka accordion i kahi ʻāpana collapsible, e hoʻohui i ke ʻano ʻikepili data-parent="#selector". E nānā i ka demo e ʻike i kēia i ka hana.

Ma o JavaScript

E ho'ā me ka lima me:

$('.collapse').collapse()

Nā koho

Hiki ke hāʻawi ʻia nā koho ma o nā ʻikepili a i ʻole JavaScript. No nā ʻano ʻikepili, e hoʻopili i ka inoa koho i data-, e like me ka data-parent="".

Nā ʻano hana

.collapse(options)

Ho'ā i kāu ʻike ma ke ʻano he mea hiki ke collapsible. ʻAe i kahi koho koho object.

$('#myCollapsible').collapse({
  toggle: false
})

.collapse('toggle')

Hoʻololi i kahi mea hiki ke hōʻike ʻia a hūnā ʻia paha. E hoʻi i ka mea kelepona ma mua o ka hōʻike ʻia ʻana a i ʻole huna ʻia o ka mea hiki ke hoʻoneʻe ʻia (ʻo ia hoʻi ma mua o ka hiki ʻana o ka hanana shown.bs.collapsea i ʻole).hidden.bs.collapse

.collapse('show')

Hōʻike i kahi mea hiki ke collapsible. E hoʻi i ka mea kelepona ma mua o ka hōʻike ʻia ʻana o ka mea hiki ke hoʻoheheʻe ʻia (ʻo ia hoʻi ma mua o ka hiki ʻana o ka shown.bs.collapsehanana).

.collapse('hide')

Hūnā i kahi mea hiki ke hoʻoheheʻe ʻia. E hoʻi i ka mea kelepona ma mua o ka hūnā ʻia ʻana o ka mea hiki ke hoʻoneʻe ʻia (ʻo ia hoʻi ma mua o ka hiki ʻana o ka hidden.bs.collapsehanana).

.collapse('dispose')

Hoʻopau i ka hāʻule ʻana o kahi mea.

Nā hanana

Hōʻike ka papa hāʻule o Bootstrap i kekahi mau hanana no ka hoʻopili ʻana i ka hana hāʻule.

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