ວິທີການສ້າງ: ຜົນກະຈາຍການກະຈາຍ.

ສຶກສາກັບການສ້າງສ່ວນຫົວຫຼັງທີ່ສາມາດກະຈາຍຄືນ.

ຜົນກະຈາຍອະວະຕານ

ການກະຈາຍປະຕູດັ່ງກ່າວເພື່ອປ່ຽນບັນດາຂໍ້ມູນສາມາດກະຈາຍລະຫວ່າງການສະແດງແລະບັງຄັບ.

Some collapsible content. Click the button to toggle between showing and hiding the collapsible content. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

亲自试一试

ສ້າງຜົນກະຈາຍຂອງອະວະຕານສາມາດກະຈາຍ:

ບາງການທີ1 - ສະແດງ HTML:

<button type="button" class="collapsible">Open Collapsible</button>
<div class="content">
  <p>Lorem ipsum...</p>
</div>

ບາງການທີ2 - ສະແດງ CSS:

ການກຳນົດຮູບແບບອະວະຕານ:

/* ການກຳນົດຮູບແບບສຳຫຼັບບັນດາກິດຈະກຳສາມາດເປີດແລະປິດຂອງຂໍ້ມູນສາມາດກະຈາຍ */
.collapsible {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}
/* ການໃສ່ສີກະບົດໃນບັນດາກິດຈະກຳເວລາທີ່ປະຕູບັງການ. ແລະ ເວລາທີ່ມຸ່ງມືດູດມາກັບບັນດາປະຕູ (hover), ການໃສ່ສີກະບົດສຳຫຼັບບັນດາປະຕູ (ໃຊ້ JS ກຳນົດ .active ຊະນິດ) */
.active, .collapsible:hover {
  background-color: #ccc;
}
/* ການກຳນົດຮູບແບບຂອງຂໍ້ມູນສາມາດກະຈາຍ. ລະເມີດ: ກຳລັງບັງຄັບ */
.content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #f1f1f1;
}

ບາງການທີ3 - ສະແດງ JavaScript:

var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.display === "block") {
      content.style.display = "none";
    } else {
      content.style.display = "block";
    }
  });
}

亲自试一试

带动画的折叠效果（向下滑动）

要创建一个带动画的折叠效果，请将 max-height: 0、overflow: hide ພາສາ max-height ພາສາ

ຫຼັງຈາກນັ້ນ，ໃຊ້ JavaScript ເພື່ອການຕິດຕັ້ງຂອງຄວາມສູງທີ່ຄາດຫວັງໃຫ້ກັບປະເພດຕົວແທນຂອງປະເພດຕົວແທນຂອງປະເພດຕົວແທນຂອງປະເພດຕົວແທນຂອງປະເພດຕົວແທນຂອງປະເພດຕົວແທນ: max-height ການຫຼຸດລົງຂອງຂັ້ນການຄົ້ນຄວ້າຕາມຄວາມສູງຂອງຕົວແທນພາບພາບພາບພາບພາບພາບພາບ:

ຄວາມລາຍງານ

<style>
.content {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}
</style>
<script>
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.maxHeight){
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
    }
  });
}
</script>

亲自试一试

ການເພີ່ມສັນຍາລະບົບ

ໃຫ້ຕົກລົງຕົວຊີ້ບັນປະໂຫຍດໃຫ້ການເປີດລົງຂອງການລະບົບສະຫຼາດຢູ່ປຶກສາຫຼືປິດລົງ:

ຄວາມລາຍງານ

.collapsible:after {
  content: '\02795'; /* 表示“加号”（+）的 Unicode 字符 */
  font-size: 13px;
  color: white;
  float: right;
  margin-left: 5px;
}
.active:after {
  content: "\2796"; /* 表示“减号”（-）的 Unicode 字符 */
}

亲自试一试