ຫຍໍ້ລົງ
ສະຫຼັບການເບິ່ງເຫັນເນື້ອຫາໃນທົ່ວໂຄງການຂອງທ່ານດ້ວຍບາງຊັ້ນຮຽນ ແລະປລັກອິນ JavaScript ຂອງພວກເຮົາ.
ມັນເຮັດວຽກແນວໃດ
plugin JavaScript ຫຍໍ້ແມ່ນໃຊ້ເພື່ອສະແດງ ແລະເຊື່ອງເນື້ອຫາ. ປຸ່ມ ຫຼືຈຸດຍຶດຖືກໃຊ້ເປັນຕົວກະຕຸ້ນທີ່ຕັ້ງຢູ່ໃນອົງປະກອບສະເພາະທີ່ທ່ານສະຫຼັບ. ການຫຍໍ້ອົງປະກອບໃດໜຶ່ງຈະເຄື່ອນໄຫວ height
ຈາກຄ່າປັດຈຸບັນຂອງມັນມາເປັນ 0
. ເນື່ອງຈາກ CSS ຈັດການກັບພາບເຄື່ອນໄຫວແນວໃດ, ທ່ານບໍ່ສາມາດໃຊ້ ອົງ padding
ປະ .collapse
ກອບໃດຫນຶ່ງ. ແທນທີ່ຈະ, ໃຊ້ຫ້ອງຮຽນເປັນອົງປະກອບຫໍ່ເອກະລາດ.
prefers-reduced-motion
ສອບຖາມສື່. ເບິ່ງ
ພາກສ່ວນການເຄື່ອນໄຫວທີ່ຫຼຸດລົງຂອງເອກະສານການຊ່ວຍເຂົ້າເຖິງຂອງພວກເຮົາ .
ຕົວຢ່າງ
ຄລິກປຸ່ມລຸ່ມນີ້ເພື່ອສະແດງ ແລະເຊື່ອງອົງປະກອບອື່ນຜ່ານການປ່ຽນແປງຊັ້ນຮຽນ:
.collapse
ເຊື່ອງເນື້ອຫາ.collapsing
ຖືກນໍາໃຊ້ໃນລະຫວ່າງການຫັນປ່ຽນ.collapse.show
ສະແດງໃຫ້ເຫັນເນື້ອໃນ
ໂດຍທົ່ວໄປ, ພວກເຮົາແນະນໍາໃຫ້ໃຊ້ປຸ່ມທີ່ມີ data-target
ຄຸນລັກສະນະ. ໃນຂະນະທີ່ບໍ່ໄດ້ແນະນໍາຈາກທັດສະນະ semantic, ທ່ານຍັງສາມາດນໍາໃຊ້ການເຊື່ອມຕໍ່ກັບ 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>
ລວງນອນ
plugin ຍຸບຍັງສະຫນັບສະຫນູນການລົ້ມລົງຕາມລວງນອນ. ເພີ່ມ .width
ຫ້ອງຮຽນຕົວແກ້ໄຂເພື່ອປ່ຽນ width
ແທນ height
ແລະຕັ້ງ a width
ໃນອົງປະກອບລູກທັນທີ. ຮູ້ສຶກບໍ່ເສຍຄ່າທີ່ຈະຂຽນ Sass ຂອງທ່ານເອງ, ໃຊ້ຮູບແບບ inline, ຫຼືໃຊ້ ປະໂຫຍດຄວາມກວ້າງ ຂອງພວກເຮົາ .
min-height
ຊຸດເພື່ອຫຼີກເວັ້ນການ repaint ຫຼາຍເກີນໄປໃນເອກະສານຂອງພວກເຮົາ, ນີ້ບໍ່ຈໍາເປັນຢ່າງຊັດເຈນ.
ຕ້ອງການພຽງແຕ່ width
ອົງປະກອບຂອງເດັກນ້ອຍເທົ່ານັ້ນ.
<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
ການນໍາໃຊ້ ອົງປະກອບຂອງ ບັດ , ທ່ານສາມາດຂະຫຍາຍພຶດຕິກໍາການຍຸບໃນຕອນຕົ້ນເພື່ອສ້າງ accordion ໄດ້. ເພື່ອບັນລຸຮູບແບບ accordion ຢ່າງຖືກຕ້ອງ, ໃຫ້ແນ່ໃຈວ່າໃຊ້ .accordion
ເປັນ wrapper.
.show
ຊັ້ນຮຽນ.
<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 ຂອງອົງປະກອບຄວບຄຸມບໍ່ແມ່ນປຸ່ມ (ຕົວຢ່າງ, <a>
ຫຼື <div>
), ຄຸນລັກສະນະrole="button"
ຄວນຈະຖືກເພີ່ມເຂົ້າໃນອົງປະກອບ.
ຖ້າອົງປະກອບຄວບຄຸມຂອງເຈົ້າກໍາລັງຕັ້ງເປົ້າໝາຍໃສ່ອົງປະກອບທີ່ພັບໄດ້ອັນດຽວ - ເຊັ່ນ: data-target
ຄຸນລັກສະນະທີ່ຊີ້ໄປຫາ id
ຕົວເລືອກ - ທ່ານຄວນເພີ່ມ aria-controls
ຄຸນສົມບັດໃຫ້ກັບອົງປະກອບຄວບຄຸມ, ເຊິ່ງປະກອບດ້ວຍ id
ອົງປະກອບທີ່ຫຍໍ້ລົງໄດ້. ເຄື່ອງອ່ານຫນ້າຈໍທີ່ທັນສະໄຫມແລະເຕັກໂນໂລຢີການຊ່ວຍເຫຼືອທີ່ຄ້າຍຄືກັນໃຊ້ຄຸນລັກສະນະນີ້ເພື່ອໃຫ້ຜູ້ໃຊ້ມີທາງລັດເພີ່ມເຕີມເພື່ອນໍາທາງໂດຍກົງໄປຫາອົງປະກອບທີ່ລົ້ມລົງເອງ.
ໃຫ້ສັງເກດວ່າການປະຕິບັດໃນປະຈຸບັນຂອງ Bootstrap ບໍ່ໄດ້ກວມເອົາການໂຕ້ຕອບຂອງແປ້ນພິມຕ່າງໆທີ່ໄດ້ອະທິບາຍໄວ້ໃນ ຮູບແບບ accordion Guide ARIA Authoring Practices - ທ່ານຈະຕ້ອງລວມເອົາສິ່ງເຫຼົ່ານີ້ດ້ວຍຕົນເອງດ້ວຍ JavaScript ແບບກໍານົດເອງ.
ການນໍາໃຊ້
ປັ໊ກອິນທີ່ລົ້ມລົງໃຊ້ສອງສາມຊັ້ນເພື່ອຈັດການກັບການຍົກຫນັກ:
.collapse
ເຊື່ອງເນື້ອຫາ.collapse.show
ສະແດງໃຫ້ເຫັນເນື້ອໃນ.collapsing
ຈະຖືກເພີ່ມເມື່ອການປ່ຽນແປງເລີ່ມຕົ້ນ, ແລະເອົາອອກເມື່ອມັນສໍາເລັດ
ຫ້ອງຮຽນເຫຼົ່ານີ້ສາມາດພົບເຫັນຢູ່ໃນ _transitions.scss
.
ຜ່ານຄຸນລັກສະນະຂໍ້ມູນ
ພຽງແຕ່ເພີ່ມ data-toggle="collapse"
ແລະ a data-target
ກັບອົງປະກອບທີ່ຈະກໍານົດອັດຕະໂນມັດການຄວບຄຸມຂອງຫນຶ່ງຫຼືຫຼາຍອົງປະກອບທີ່ຍຸບໄດ້. ຄຸນລັກ ສະ data-target
ນະຍອມຮັບຕົວເລືອກ CSS ເພື່ອໃຊ້ການຫຍໍ້ລົງ. ໃຫ້ແນ່ໃຈວ່າຈະເພີ່ມຊັ້ນ collapse
ເຂົ້າໄປໃນອົງປະກອບທີ່ຫຍໍ້ລົງໄດ້. ຖ້າທ່ານຕ້ອງການໃຫ້ມັນເປີດໃນຕອນຕົ້ນ, ໃຫ້ເພີ່ມຊັ້ນຮຽນເພີ່ມເຕີມ show
.
ເພື່ອເພີ່ມການຈັດການກຸ່ມທີ່ຄ້າຍກັບ accordion ໃສ່ພື້ນທີ່ທີ່ພັບໄດ້, ເພີ່ມຄຸນສົມບັດຂໍ້ມູນ data-parent="#selector"
. ອ້າງເຖິງການສາທິດເພື່ອເບິ່ງອັນນີ້ໃນການປະຕິບັດ.
ຜ່ານ JavaScript
ເປີດໃຊ້ດ້ວຍຕົນເອງດ້ວຍ:
$('.collapse').collapse()
ທາງເລືອກ
ທາງເລືອກສາມາດຖືກສົ່ງຜ່ານຄຸນລັກສະນະຂໍ້ມູນຫຼື JavaScript. ສໍາລັບຄຸນລັກສະນະຂໍ້ມູນ, ຕື່ມຊື່ທາງເລືອກໃສ່ data-
, ໃນ data-parent=""
.
ຊື່ | ປະເພດ | ຄ່າເລີ່ມຕົ້ນ | ລາຍລະອຽດ |
---|---|---|---|
ພໍ່ແມ່ | ຕົວເລືອກ | jQuery object | ອົງປະກອບ DOM | ບໍ່ຖືກຕ້ອງ | ຖ້າມີການໃຫ້ພໍ່ແມ່, ຫຼັງຈາກນັ້ນອົງປະກອບທີ່ຫຍໍ້ລົງໄດ້ທັງຫມົດພາຍໃຕ້ພໍ່ແມ່ທີ່ລະບຸໄວ້ຈະຖືກປິດເມື່ອລາຍການທີ່ຫຍໍ້ໄດ້ນີ້ຖືກສະແດງ. (ຄ້າຍຄືກັນກັບພຶດຕິກໍາ accordion ພື້ນເມືອງ - ນີ້ແມ່ນຂຶ້ນກັບ card ຫ້ອງຮຽນ). ຄຸນລັກສະນະຕ້ອງຖືກຕັ້ງຢູ່ເທິງພື້ນທີ່ທີ່ຍຸບໄດ້. |
ສະຫຼັບ | ບູລີນ | ຄວາມຈິງ | ສະຫຼັບອົງປະກອບທີ່ຫຍໍ້ລົງໄດ້ໃນຄຳເຊີນ |
ວິທີການ
ວິທີການ asynchronous ແລະການຫັນປ່ຽນ
ວິທີການ API ທັງໝົດແມ່ນ asynchronous ແລະເລີ່ມການ ຫັນປ່ຽນ . ພວກເຂົາກັບຄືນໄປຫາຜູ້ໂທທັນທີທີ່ການຫັນປ່ຽນເລີ່ມຕົ້ນແຕ່ ກ່ອນທີ່ມັນຈະສິ້ນສຸດລົງ . ນອກຈາກນັ້ນ, ການໂທຫາວິທີການກ່ຽວກັບ ອົງປະກອບຂອງການປ່ຽນແປງຈະຖືກລະເລີຍ .
.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 ວິທີການຕົວຢ່າງຖືກເອີ້ນ. |
show.bs.collapse | ເຫດການນີ້ຖືກດັບໄຟເມື່ອອົງປະກອບການຫຍໍ້ລົງໄດ້ຖືກເຮັດໃຫ້ຜູ້ໃຊ້ເຫັນໄດ້ (ຈະລໍຖ້າໃຫ້ CSS transitions ສໍາເລັດ). |
hide.bs.collapse | ເຫດການນີ້ຖືກຍິງທັນທີເມື່ອ hide ວິທີການໄດ້ຖືກເອີ້ນ. |
hidden.bs.collapse | ເຫດການນີ້ຖືກດັບໄຟເມື່ອອົງປະກອບຫຍໍ້ທໍ້ຖືກເຊື່ອງໄວ້ຈາກຜູ້ໃຊ້ (ຈະລໍຖ້າການປ່ຽນ CSS ສໍາເລັດ). |
$('#myCollapsible').on('hidden.bs.collapse', function () {
// do something...
})