ຂ້າມໄປຫາເນື້ອຫາຕົ້ນຕໍ ຂ້າມໄປຫາການນຳທາງເອກະສານ
in English

ຫຍໍ້ລົງ

ສະຫຼັບການເບິ່ງເຫັນເນື້ອຫາໃນທົ່ວໂຄງການຂອງທ່ານດ້ວຍບາງຊັ້ນຮຽນ ແລະປລັກອິນ JavaScript ຂອງພວກເຮົາ.

ມັນເຮັດວຽກແນວໃດ

plugin JavaScript ຫຍໍ້ແມ່ນໃຊ້ເພື່ອສະແດງ ແລະເຊື່ອງເນື້ອຫາ. ປຸ່ມ ຫຼືຈຸດຍຶດຖືກໃຊ້ເປັນຕົວກະຕຸ້ນທີ່ຕັ້ງຢູ່ໃນອົງປະກອບສະເພາະທີ່ທ່ານສະຫຼັບ. ການຫຍໍ້ອົງປະກອບໃດໜຶ່ງຈະເຄື່ອນໄຫວ heightຈາກຄ່າປັດຈຸບັນຂອງມັນມາເປັນ 0. ເນື່ອງຈາກ CSS ຈັດການກັບພາບເຄື່ອນໄຫວແນວໃດ, ທ່ານບໍ່ສາມາດໃຊ້ ອົງ paddingປະ .collapseກອບໃດຫນຶ່ງ. ແທນທີ່ຈະ, ໃຊ້ຫ້ອງຮຽນເປັນອົງປະກອບຫໍ່ເອກະລາດ.

ຜົນກະທົບຂອງພາບເຄື່ອນໄຫວຂອງອົງປະກອບນີ້ແມ່ນຂຶ້ນກັບການ prefers-reduced-motionສອບຖາມສື່. ເບິ່ງ ພາກສ່ວນການເຄື່ອນໄຫວທີ່ຫຼຸດລົງຂອງເອກະສານການຊ່ວຍເຂົ້າເຖິງຂອງພວກເຮົາ .

ຕົວຢ່າງ

ຄລິກປຸ່ມລຸ່ມນີ້ເພື່ອສະແດງ ແລະເຊື່ອງອົງປະກອບອື່ນຜ່ານການປ່ຽນແປງຊັ້ນຮຽນ:

  • .collapseເຊື່ອງເນື້ອຫາ
  • .collapsingຖືກນໍາໃຊ້ໃນລະຫວ່າງການຫັນປ່ຽນ
  • .collapse.showສະ​ແດງ​ໃຫ້​ເຫັນ​ເນື້ອ​ໃນ​

ໂດຍທົ່ວໄປ, ພວກເຮົາແນະນໍາໃຫ້ໃຊ້ປຸ່ມທີ່ມີ data-bs-targetຄຸນລັກສະນະ. ໃນຂະນະທີ່ບໍ່ໄດ້ແນະນໍາຈາກທັດສະນະ semantic, ທ່ານຍັງສາມາດນໍາໃຊ້ການເຊື່ອມຕໍ່ກັບ hrefຄຸນລັກສະນະ (ແລະ a role="button"). ໃນທັງສອງກໍລະນີ, data-bs-toggle="collapse"ຕ້ອງການ.

Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
<p>
  <a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  </a>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Button with data-bs-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 ຍຸບຍັງສະຫນັບສະຫນູນການລົ້ມລົງຕາມລວງນອນ. ເພີ່ມ .collapse-horizontalຫ້ອງຮຽນຕົວແກ້ໄຂເພື່ອປ່ຽນ widthແທນ heightແລະຕັ້ງ a widthໃນອົງປະກອບລູກທັນທີ. ຮູ້ສຶກບໍ່ເສຍຄ່າທີ່ຈະຂຽນ Sass ຂອງທ່ານເອງ, ໃຊ້ຮູບແບບ inline, ຫຼືໃຊ້ ປະໂຫຍດຄວາມກວ້າງ ຂອງພວກເຮົາ .

ກະລຸນາສັງເກດວ່າໃນຂະນະທີ່ຕົວຢ່າງຂ້າງລຸ່ມນີ້ມີ min-heightຊຸດເພື່ອຫຼີກເວັ້ນການ repaint ຫຼາຍເກີນໄປໃນເອກະສານຂອງພວກເຮົາ, ນີ້ບໍ່ຈໍາເປັນຢ່າງຊັດເຈນ. ຕ້ອງການພຽງແຕ່ widthອົງປະກອບຂອງເດັກນ້ອຍເທົ່ານັ້ນ.

This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
<p>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample">
    Toggle width collapse
  </button>
</p>
<div style="min-height: 120px;">
  <div class="collapse collapse-horizontal" id="collapseWidthExample">
    <div class="card card-body" style="width: 300px;">
      This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
    </div>
  </div>
</div>

ຫຼາຍເປົ້າໝາຍ

A <button>ຫຼື <a>ສາມາດສະແດງແລະຊ່ອນຫຼາຍອົງປະກອບໂດຍການອ້າງອິງພວກມັນດ້ວຍຕົວເລືອກໃນ hrefຫຼື data-bs-targetຄຸນລັກສະນະຂອງມັນ. ຫຼາຍ <button>ຫຼື <a>ສາມາດສະແດງ ແລະຊ່ອນອົງປະກອບໃດໜຶ່ງໄດ້ ຖ້າພວກເຂົາແຕ່ລະອ້າງອີງມັນດ້ວຍ ຄຸນສົມບັດ hrefຫຼື data-bs-targetຄຸນສົມບັດ ຂອງເຂົາເຈົ້າ

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.
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.
<p>
  <a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-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>

ການເຂົ້າເຖິງ

ໃຫ້ແນ່ໃຈວ່າເພີ່ມ aria-expandedໃສ່ອົງປະກອບຄວບຄຸມ. ຄຸນສົມບັດນີ້ບົ່ງບອກເຖິງສະຖານະປັດຈຸບັນຂອງອົງປະກອບທີ່ຫຍໍ້ລົງຢ່າງຈະແຈ້ງທີ່ຜູກມັດກັບການຄວບຄຸມເພື່ອກວດສອບຜູ້ອ່ານ ແລະເຕັກໂນໂລຊີການຊ່ວຍເຫຼືອທີ່ຄ້າຍຄືກັນ. ຖ້າອົງປະກອບທີ່ຫຍໍ້ລົງໄດ້ຖືກປິດໂດຍຄ່າເລີ່ມຕົ້ນ, ຄຸນລັກສະນະຂອງອົງປະກອບຄວບຄຸມຄວນມີມູນຄ່າ aria-expanded="false". ຖ້າທ່ານໄດ້ຕັ້ງອົງປະກອບທີ່ສາມາດພັບໄດ້ໃຫ້ເປີດເປັນຄ່າເລີ່ມຕົ້ນໂດຍໃຊ້ showຊັ້ນ, ໃຫ້ຕັ້ງ aria-expanded="true"ໃສ່ຕົວຄວບຄຸມແທນ. ປັ໊ກອິນຈະສະຫຼັບຄຸນລັກສະນະນີ້ໂດຍອັດຕະໂນມັດໃນການຄວບຄຸມໂດຍອີງໃສ່ວ່າອົງປະກອບທີ່ພັບໄດ້ໄດ້ຖືກເປີດຫຼືປິດຫຼືບໍ່ (ຜ່ານ JavaScript, ຫຼືຍ້ອນວ່າຜູ້ໃຊ້ກະຕຸ້ນອົງປະກອບຄວບຄຸມອື່ນທີ່ເຊື່ອມໂຍງກັບອົງປະກອບທີ່ຍຸບໄດ້ຄືກັນ). ຖ້າອົງປະກອບ HTML ຂອງອົງປະກອບຄວບຄຸມບໍ່ແມ່ນປຸ່ມ (ຕົວຢ່າງ, <a>ຫຼື <div>), ຄຸນລັກສະນະrole="button"ຄວນຈະຖືກເພີ່ມເຂົ້າໃນອົງປະກອບ.

ຖ້າອົງປະກອບຄວບຄຸມຂອງເຈົ້າກໍາລັງຕັ້ງເປົ້າໝາຍໃສ່ອົງປະກອບທີ່ພັບໄດ້ອັນດຽວ - ເຊັ່ນ: data-bs-targetຄຸນລັກສະນະທີ່ຊີ້ໄປຫາ idຕົວເລືອກ - ທ່ານຄວນເພີ່ມ aria-controlsຄຸນສົມບັດໃຫ້ກັບອົງປະກອບຄວບຄຸມ, ເຊິ່ງປະກອບດ້ວຍ idອົງປະກອບທີ່ຫຍໍ້ລົງໄດ້. ເຄື່ອງອ່ານຫນ້າຈໍທີ່ທັນສະໄຫມແລະເຕັກໂນໂລຢີການຊ່ວຍເຫຼືອທີ່ຄ້າຍຄືກັນໃຊ້ຄຸນລັກສະນະນີ້ເພື່ອໃຫ້ຜູ້ໃຊ້ມີທາງລັດເພີ່ມເຕີມເພື່ອນໍາທາງໂດຍກົງໄປຫາອົງປະກອບທີ່ລົ້ມລົງເອງ.

ໃຫ້ສັງເກດວ່າການປະຕິບັດໃນປະຈຸບັນຂອງ Bootstrap ບໍ່ໄດ້ກວມເອົາການ ໂຕ້ຕອບຂອງແປ້ນພິມ ທາງເລືອກ ຕ່າງໆທີ່ອະທິບາຍໄວ້ໃນຮູບແບບ WAI-ARIA Authoring Practices 1.1 accordion - ທ່ານຈະຕ້ອງລວມເອົາສິ່ງເຫຼົ່ານີ້ດ້ວຍຕົນເອງກັບ JavaScript ແບບກໍານົດເອງ.

ຊາສ

ຕົວແປ

$transition-collapse:         height .35s ease;
$transition-collapse-width:   width .35s ease;

ຫ້ອງຮຽນ

ຫຍໍ້ຊັ້ນການຫັນປ່ຽນສາມາດພົບໄດ້ໃນ scss/_transitions.scssຍ້ອນວ່າສິ່ງເຫຼົ່ານີ້ຖືກແບ່ງປັນໃນທົ່ວອົງປະກອບຫຼາຍອັນ (ຫຍໍ້ລົງ ແລະສຽງເພງ).

.collapse {
  &:not(.show) {
    display: none;
  }
}

.collapsing {
  height: 0;
  overflow: hidden;
  @include transition($transition-collapse);

  &.collapse-horizontal {
    width: 0;
    height: auto;
    @include transition($transition-collapse-width);
  }
}

ການ​ນໍາ​ໃຊ້

ປັ໊ກອິນທີ່ລົ້ມລົງໃຊ້ສອງສາມຊັ້ນເພື່ອຈັດການກັບການຍົກຫນັກ:

  • .collapseເຊື່ອງເນື້ອຫາ
  • .collapse.showສະ​ແດງ​ໃຫ້​ເຫັນ​ເນື້ອ​ໃນ​
  • .collapsingຈະຖືກເພີ່ມເມື່ອການປ່ຽນແປງເລີ່ມຕົ້ນ, ແລະເອົາອອກເມື່ອມັນສໍາເລັດ

ຫ້ອງຮຽນເຫຼົ່ານີ້ສາມາດພົບເຫັນຢູ່ໃນ _transitions.scss.

ຜ່ານຄຸນລັກສະນະຂໍ້ມູນ

ພຽງ​ແຕ່​ເພີ່ມ data-bs-toggle="collapse"​ແລະ a data-bs-targetກັບ​ອົງ​ປະ​ກອບ​ທີ່​ຈະ​ກໍາ​ນົດ​ອັດ​ຕະ​ໂນ​ມັດ​ການ​ຄວບ​ຄຸມ​ຂອງ​ຫນຶ່ງ​ຫຼື​ຫຼາຍ​ອົງ​ປະ​ກອບ​ທີ່​ຍຸບ​ໄດ້​. ຄຸນລັກ ສະ data-bs-targetນະຍອມຮັບຕົວເລືອກ CSS ເພື່ອໃຊ້ການຫຍໍ້ລົງ. ໃຫ້ແນ່ໃຈວ່າຈະເພີ່ມຊັ້ນ collapseເຂົ້າໄປໃນອົງປະກອບທີ່ຫຍໍ້ລົງໄດ້. ຖ້າທ່ານຕ້ອງການໃຫ້ມັນເປີດໃນຕອນຕົ້ນ, ໃຫ້ເພີ່ມຊັ້ນຮຽນເພີ່ມເຕີມ show.

ເພື່ອເພີ່ມການຈັດການກຸ່ມທີ່ຄ້າຍກັບ accordion ໃສ່ພື້ນທີ່ທີ່ພັບໄດ້, ເພີ່ມຄຸນສົມບັດຂໍ້ມູນ data-bs-parent="#selector". ອ້າງອີງໃສ່ ຫນ້າ accordion ສໍາລັບຂໍ້ມູນເພີ່ມເຕີມ.

ຜ່ານ JavaScript

ເປີດໃຊ້ດ້ວຍຕົນເອງດ້ວຍ:

var collapseElementList = [].slice.call(document.querySelectorAll('.collapse'))
var collapseList = collapseElementList.map(function (collapseEl) {
  return new bootstrap.Collapse(collapseEl)
})

ທາງເລືອກ

ທາງເລືອກສາມາດຖືກສົ່ງຜ່ານຄຸນລັກສະນະຂໍ້ມູນຫຼື JavaScript. ສໍາລັບຄຸນລັກສະນະຂໍ້ມູນ, ຕື່ມຊື່ທາງເລືອກໃສ່ data-bs-, ໃນ data-bs-parent="".

ຊື່ ປະເພດ ຄ່າເລີ່ມຕົ້ນ ລາຍລະອຽດ
parent ຕົວເລືອກ | jQuery object | ອົງປະກອບ DOM false ຖ້າມີການໃຫ້ພໍ່ແມ່, ຫຼັງຈາກນັ້ນອົງປະກອບທີ່ຫຍໍ້ລົງໄດ້ທັງຫມົດພາຍໃຕ້ພໍ່ແມ່ທີ່ລະບຸໄວ້ຈະຖືກປິດເມື່ອລາຍການທີ່ຫຍໍ້ໄດ້ນີ້ຖືກສະແດງ. (ຄ້າຍຄືກັນກັບພຶດຕິກໍາ accordion ພື້ນເມືອງ - ນີ້ແມ່ນຂຶ້ນກັບ cardຫ້ອງຮຽນ). ຄຸນລັກສະນະຕ້ອງຖືກຕັ້ງຢູ່ເທິງພື້ນທີ່ທີ່ຍຸບໄດ້.
toggle ບູລີນ true ສະຫຼັບອົງປະກອບທີ່ຫຍໍ້ລົງໄດ້ໃນຄຳເຊີນ

ວິທີການ

ວິ​ທີ​ການ asynchronous ແລະ​ການ​ຫັນ​ປ່ຽນ​

ວິທີການ API ທັງໝົດແມ່ນ asynchronous ແລະເລີ່ມການ ຫັນປ່ຽນ . ພວກເຂົາກັບຄືນໄປຫາຜູ້ໂທທັນທີທີ່ການຫັນປ່ຽນເລີ່ມຕົ້ນແຕ່ ກ່ອນທີ່ມັນຈະສິ້ນສຸດລົງ . ນອກຈາກນັ້ນ, ການໂທຫາວິທີການກ່ຽວກັບ ອົງປະກອບຂອງການປ່ຽນແປງຈະຖືກລະເລີຍ .

ເບິ່ງເອກະສານ JavaScript ຂອງພວກເຮົາສໍາລັບຂໍ້ມູນເພີ່ມເຕີມ .

ເປີດໃຊ້ເນື້ອຫາຂອງທ່ານເປັນອົງປະກອບທີ່ຫຍໍ້ລົງໄດ້. ຍອມຮັບທາງເລືອກທີ່ເປັນທາງເລືອກ object.

ທ່ານ​ສາ​ມາດ​ສ້າງ​ຕົວ​ຢ່າງ​ພັງ​ລົງ​ກັບ​ຜູ້​ກໍ່​ສ້າງ​, ສໍາ​ລັບ​ການ​ຍົກ​ຕົວ​ຢ່າງ​:

var myCollapse = document.getElementById('myCollapse')
var bsCollapse = new bootstrap.Collapse(myCollapse, {
  toggle: false
})
ວິທີການ ລາຍລະອຽດ
toggle ສະຫຼັບອົງປະກອບທີ່ຫຍໍ້ລົງໄດ້ເພື່ອສະແດງ ຫຼືເຊື່ອງໄວ້. ກັບຄືນໄປຫາຜູ້ໂທກ່ອນທີ່ອົງປະກອບທີ່ຫຍໍ້ລົງໄດ້ສະແດງໃຫ້ເຫັນຕົວຈິງຫຼືຖືກເຊື່ອງໄວ້ (ເຊັ່ນວ່າກ່ອນທີ່ເຫດການ shown.bs.collapseຫຼື hidden.bs.collapseເຫດການຈະເກີດຂື້ນ).
show ສະແດງອົງປະກອບທີ່ຫຍໍ້ລົງໄດ້. ກັບຄືນໄປຫາຜູ້ໂທກ່ອນທີ່ອົງປະກອບທີ່ຫຍໍ້ລົງໄດ້ສະແດງໃຫ້ເຫັນຕົວຈິງແລ້ວ (ຕົວຢ່າງ, ກ່ອນທີ່ shown.bs.collapseເຫດການຈະເກີດຂື້ນ).
hide ເຊື່ອງອົງປະກອບທີ່ຫຍໍ້ລົງໄດ້. ກັບຄືນໄປຫາຜູ້ໂທກ່ອນທີ່ອົງປະກອບທີ່ຍຸບໄດ້ຕົວຈິງແລ້ວໄດ້ຖືກເຊື່ອງໄວ້ (ຕົວຢ່າງ, ກ່ອນທີ່ hidden.bs.collapseເຫດການຈະເກີດຂື້ນ).
dispose ທໍາລາຍການຍຸບຕົວຂອງອົງປະກອບ. (ລຶບຂໍ້ມູນທີ່ເກັບໄວ້ໃນອົງປະກອບ DOM)
getInstance ວິທີການຄົງທີ່ທີ່ອະນຸຍາດໃຫ້ທ່ານໄດ້ຮັບຕົວຢ່າງການລົ້ມລົງທີ່ກ່ຽວຂ້ອງກັບອົງປະກອບ DOM, ທ່ານສາມາດນໍາໃຊ້ມັນເຊັ່ນນີ້:bootstrap.Collapse.getInstance(element)
getOrCreateInstance ວິທີການຄົງທີ່ທີ່ຈະສົ່ງຄືນຕົວຢ່າງການຫຍໍ້ລົງທີ່ກ່ຽວຂ້ອງກັບອົງປະກອບ DOM ຫຼືສ້າງອັນໃຫມ່ໃນກໍລະນີທີ່ມັນບໍ່ໄດ້ຖືກເລີ່ມຕົ້ນ. ທ່ານ​ສາ​ມາດ​ນໍາ​ໃຊ້​ມັນ​ເຊັ່ນ​ນີ້​:bootstrap.Collapse.getOrCreateInstance(element)

ເຫດການ

ຫ້ອງຮຽນຍຸບຂອງ Bootstrap ເປີດເຜີຍເຫດການບໍ່ຫຼາຍປານໃດສໍາລັບການເຊື່ອມໂຍງກັບຫນ້າທີ່ການລົ້ມລົງ.

ປະເພດເຫດການ ລາຍລະອຽດ
show.bs.collapse ເຫດການນີ້ໄຟໄຫມ້ທັນທີເມື່ອ showວິທີການຕົວຢ່າງຖືກເອີ້ນ.
shown.bs.collapse ເຫດການນີ້ຖືກດັບໄຟເມື່ອອົງປະກອບການຫຍໍ້ລົງໄດ້ຖືກເຮັດໃຫ້ຜູ້ໃຊ້ເຫັນໄດ້ (ຈະລໍຖ້າໃຫ້ CSS transitions ສໍາເລັດ).
hide.bs.collapse ເຫດການນີ້ຖືກຍິງທັນທີເມື່ອ hideວິທີການໄດ້ຖືກເອີ້ນ.
hidden.bs.collapse ເຫດການນີ້ຖືກດັບໄຟເມື່ອອົງປະກອບຫຍໍ້ທໍ້ຖືກເຊື່ອງໄວ້ຈາກຜູ້ໃຊ້ (ຈະລໍຖ້າການປ່ຽນ CSS ສໍາເລັດ).
var myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', function () {
  // do something...
})