Tiango
Takahurihia te whakakitenga o te ihirangi puta noa i to kaupapa me etahi karaehe me a maatau taputapu JavaScript.
Pehea te mahi
Ka whakamahia te mono JavaScript tiango hei whakaatu me te huna i nga ihirangi. Ka whakamahia nga patene, punga ranei hei keu ka mapi ki nga huānga motuhake ka takahurihia e koe. Ma te tiango i tetahi huānga ka whakakorikori i te height
mai i tona uara o naianei ki 0
. Me pehea te whakahaere a CSS i nga pakiwaituhi, kaore e taea e koe te whakamahi padding
i runga i tetahi .collapse
huānga. Engari, whakamahia te akomanga hei huānga takai motuhake.
prefers-reduced-motion
uiui pāpāho. Tirohia te
waahanga motini whakaheke o a maatau tuhinga whakaurunga .
Tauira
Patohia nga paatene i raro nei hei whakaatu me te huna i tetahi atu huānga ma nga huringa akomanga:
.collapse
huna ihirangi.collapsing
ka whakamahia i nga wa whakawhiti.collapse.show
whakaatu ihirangi
Ko te tikanga, ka tūtohu matou ki te whakamahi i te paatene me te data-target
huanga. Ahakoa kaore i te tūtohutia mai i te tirohanga o te reo, ka taea hoki e koe te whakamahi i te hono me te href
huanga (me te role="button"
). I roto i nga take e rua, data-toggle="collapse"
e hiahiatia ana.
<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>
Whakapae
Ka tautokohia e te mono tiango te tiango whakapae. Tāpirihia te .width
karaehe whakakē ki te whakawhiti i te width
hei utu height
me te tautuhi i te width
ki runga i te huānga tamaiti tonu. Tena koa ki te tuhi i a koe ake Sass ritenga, whakamahi i nga momo raarangi, whakamahi ranei i a maatau taputapu whanui .
min-height
huinga hei karo i te maha o nga peita hou i roto i a maatau tuhinga, kaore tenei e tino hiahiatia.
Ko te width
waahanga o te tamaiti anake e hiahiatia ana.
<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>
Nga whaainga maha
Ka taea e te <button>
ranei <a>
te whakaatu me te huna i nga huānga maha ma te tohutoro me te kaiwhiri JQuery i roto i tona href
huanga data-target
. He maha , ka taea <button>
ranei <a>
te whakaatu me te huna i tetahi huānga mena ka tohua e ia me o href
raatau data-target
huanga
<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>
Tauira akoriona
Ma te whakamahi i te waahanga kaari , ka taea e koe te toro atu i te whanonga tiango taunoa hei hanga i te akoriona. Ki te whakatutuki tika i te kāhua accordion, kia mohio ki te whakamahi .accordion
hei takai.
.show
karaehe.
<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>
Te urunga
Me tino taapiri atu aria-expanded
ki te huānga mana. Ko tenei huanga e whakaatu marama ana i te ahuatanga o naianei o te huānga tiango e herea ana ki te mana ki nga kaipanui mata me nga hangarau awhina rite. Mena kua katia te huānga tiango ma te taunoa, me whai uara o te huanga o te huānga mana aria-expanded="false"
. Mena kua tautuhia e koe te huānga tiango kia tuwhera ma te taunoa ma te whakamahi i te show
karaehe, tohua aria-expanded="true"
ki te mana. Ka takahuri aunoa te mono i tenei huanga i runga i te mana i runga i te mea kua whakatuwherahia, kua kati ranei te huānga tiango (ma te JavaScript, na te mea i whakaoho te kaiwhakamahi i tetahi atu huānga mana e herea ana ki taua huānga tiango). Mena ko te huānga HTML o te mana whakahaere ehara i te paatene (hei tauira, he <a>
ranei <div>
), te huangarole="button"
me taapiri atu ki te huānga.
Mēnā e aro ana tō huānga mana ki tētahi huānga tiango kotahi – arā data-target
, e tohu ana te huanga ki tētahi id
kaikōwhiri – me tāpiri koe i te aria-controls
huanga ki te huānga mana, kei roto te id
o te huānga tiango. Ka whakamahia e nga kaipanui mata hou me nga hangarau awhina rite tenei huanga ki te whakarato ki nga kaiwhakamahi etahi atu pokatata ki te whakatere tika ki te huānga tiango ake.
Kia mahara ko te whakatinanatanga o naianei a Bootstrap kaore e kapi i nga momo taunekeneke papapātuhi e whakaahuatia ana i roto i te tauira accordion Aratohu Arahi Kaituhi ARIA - me whakauru koe ki enei me te JavaScript ritenga.
Whakamahinga
Ka whakamahia e te mono tiango etahi karaehe hei hapai i te hiki taumaha:
.collapse
ka huna i te ihirangi.collapse.show
whakaatu te ihirangi.collapsing
ka taapirihia ina timata te whakawhiti, ka tangohia ina mutu
Ka kitea enei akomanga i roto i _transitions.scss
.
Ma nga huanga raraunga
Taapiri noa data-toggle="collapse"
me te data-target
a ki te huānga hei tautapa aunoa i te mana o tetahi, neke atu ranei nga huānga tiango. Ka data-target
whakaaetia e te huanga he kaikowhiri CSS hei hoatu i te tiango ki. Me tino taapiri te karaehe collapse
ki te huānga tiango. Mena kei te pirangi koe kia tuwhera taunoa, taapirihia te akomanga taapiri show
.
Hei taapiri i te whakahaere roopu rite-akordion ki tetahi waahi tiango, taapirihia te huanga raraunga data-parent="#selector"
. Tirohia te demo kia kite i tenei mahi.
Ma te JavaScript
Whakahohe ā-ringa ki:
$('.collapse').collapse()
Kōwhiringa
Ko nga whiringa ka taea te tuku ma nga huanga raraunga, JavaScript ranei. Mo nga huanga raraunga, apitihia te ingoa whiringa ki data-
, penei i te data-parent=""
.
Ingoa | Momo | Taunoa | Whakaahuatanga |
---|---|---|---|
matua | kaiwhiriwhiri | ahanoa jQuery | Huānga DOM | teka | Mena ka tukuna he matua, ka kati nga huānga tiango katoa i raro i te matua kua tohua ina whakaatuhia tenei mea tiango. (he rite ki te whanonga accordion tuku iho - ka whakawhirinaki tenei ki te card karaehe). Me whakanoho te huanga ki runga i te waahi ka taea te tiango. |
takahuri | boolean | pono | Ka takahuri i te huānga tiango i runga i te inoi |
Nga tikanga
Nga tikanga tukutahi me nga whakawhitinga
Ko nga tikanga API katoa he tukutahi ka timata te whakawhiti . Ka hoki mai ano ki te kaikaranga ina timata te whakawhiti engari i mua i te mutunga . I tua atu, ka warewarehia te karanga tikanga mo tetahi waahanga whakawhiti .
.collapse(options)
Ka whakahohe i to ihirangi hei huānga tiango. Ka whakaae ki nga whiringa whiriwhiri object
.
$('#myCollapsible').collapse({
toggle: false
})
.collapse('toggle')
Ka takahuri i tetahi huānga tiango hei whakaatu, huna ranei. Ka hoki ki te kaiwaea i mua i te whakaaturanga, huna ranei o te huānga tiango (arā, i mua i te puta o shown.bs.collapse
te hidden.bs.collapse
takahanga).
.collapse('show')
He whakaatu huānga tiango. Ka hoki ki te kaiwaea i mua i te whakaaturanga o te huānga tiango (arā i mua i te shown.bs.collapse
puta o te takahanga).
.collapse('hide')
Hunaia he huānga tiango. Ka hoki ki te kaiwaea i mua i te hunanga o te huānga tiango (arā i mua i te hidden.bs.collapse
puta o te takahanga).
.collapse('dispose')
Ka whakangaro i te tiango o te huānga.
Nga huihuinga
Ko te karaehe tiango a Bootstrap e whakaatu ana i etahi huihuinga mo te hono ki te mahi tiango.
Momo Takahanga | Whakaahuatanga |
---|---|
show.bs.collapse | Ka pupuhi tenei takahanga ina ka show karangahia te aratuka tauira. |
whakaaturia.bs.collapse | Ka pupuhihia tenei takahanga ina kitea he huānga tiango ki te kaiwhakamahi (ka tatari kia oti nga whakawhitinga CSS). |
huna.bs.collapse | Ka pupuhihia tenei kaupapa i te wa hide i kiia ai te tikanga. |
huna.bs.collapse | Ka pupuhihia tenei takahanga ina hunahia he huānga tiango mai i te kaiwhakamahi (ka tatari kia oti nga whakawhitinga CSS). |
$('#myCollapsible').on('hidden.bs.collapse', function () {
// do something...
})