ວິທີການທີ່ສາມາດສ້າງອຸປະກອນພາບລົງຕິດທີ່ສາມາດກະຕຸ້ມໄດ້

ຮຽນວິທີການທີ່ສາມາດສ້າງອຸປະກອນພາບລົງຕິດທີ່ສາມາດກະຕຸ້ມໄດ້ດ້ວຍ CSS ແລະ JavaScript

ສ້າງອຸປະກອນພາບລົງຕິດທີ່ສາມາດກະຕຸ້ມໄດ້

ສ້າງອຸປະກອນພາບລົງຕິດທີ່ຈະປາກົດມາເມື່ອຜູ້ນຳໃຊ້ຊົງປະຕິບັດການ

ກ່ອນການທຳງານ 1 - ສະເພາະ HTML:

<div class="dropdown">
  <button onclick="myFunction()" class="dropbtn">ປະຕິບັດການ</button>
  <div id="myDropdown" class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

ຄຳອະທິບາຍຄວາມຄິດ:

ສາມາດນຳໃຊ້ປະກອບໃດໆທີ່ຈະເປີດລະບົບພົ່ນ ເຊັ່ນ <button>、<a> ຫລື <p>.

ນຳໃຊ້ປະກອບສິ່ງຂອງລະບົບພົ່ນ (ເຊັ່ນ <div>) ເພື່ອສ້າງລະບົບພົ່ນແລະເພີ່ມທາງພົ່ນ.

ນຳໃຊ້ປະກອບ <div> ເພື່ອຈັດການວຽງມືຂອງການປິດທີ່ຖືກສະແດງແລະຈັດການລະບົບພົ່ນ.

ບາງຄັ້ງທີ່ສອງ - ການເພີ່ມ CSS:

/* ການປິດທີ່ຖືກພັດທະນາ */
.dropbtn {
  background-color: #3498DB;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}
/* ການພັດທະນາການປິດທີ່ຖືກສະແດງແລະກວດສອບ */
.dropbtn:hover, .dropbtn:focus {
  background-color: #2980B9;
}
/* ປະກອບສິ່ງທີ່ຕ້ອງການເພື່ອຈັດການລະບົບພົ່ນ */
.dropdown {
  position: relative;
  display: inline-block;
}
/* ການກວດສອບຂໍ້ມູນພົ່ນທີ່ຖືກປິດໂດຍຄາດການ */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
/* ການເຊື່ອມທາງໃນລະບົບພົ່ນ */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
/* ການປ່ຽນສະຫລັກສີທີ່ຖືກພັດທະນາໂດຍສົບເຄື່ອງ */
.dropdown-content a:hover {background-color: #ddd;}
/* ສະແດງມືຖືລົງຕິດ (ເມື່ອຜູ້ນຳໃຊ້ຄົງຢູ່ບັນຕາສັນຍາລະບາດມືຖືລົງຕິດ ພວກເຮົາໃຊ້ JS ໃຫ້ມີປະເພດ .dropdown-content ກວມເອົາພາກສ່ວນທີ່ສະແດງ) */
.show {display:block;}

ຄຳອະທິບາຍຄວາມຄິດ:

ເພື່ອຈຸດສະຖານະມືຖືລົງຕິດ.

ໃຊ້ ທາງວັດຖຸກະຈາຍ position:relative，ເມື່ອພວກເຮົາຕ້ອງການປະຕິບັດມືຖືລົງຕິດທີ່ຢູ່ລາງກ້ອງມືຖືລົງຕິດທີ່ຕັ້ງຢູ່ (ໃຊ້ position:absolute), ນັ້ນເປັນສິ່ງທີ່ຈຳເປັນ.

.dropdown-content ປະເພດທີ່ກວມເອົາມືຖືລົງຕິດທີ່ມີຢູ່. ມືຖືລົງຕິດຈະປິດຕົວແລ້ວ ແລະຈະສະແດງມາເມື່ອການຍົກມູນວຽນ (ເຫັນລາຍລະອຽດໃຫ້ຫຼັງ). ສັບສົນ: ຄວາມຍາວທີ່ນ້ອຍສະເໜີໃຫ້ 160px. ທ່ານສາມາດປ່ຽນຄາດຕະການນີ້ຕາມຄວາມຕ້ອງການ. ຄຳແນະນຳ: ຖ້າທ່ານຕ້ອງການໃຫ້ມືຖືລົງຕິດທີ່ມີຂະໜາດດຽວກັນກັບບັນຕາສັນຍາລະບາດມືຖືລົງຕິດ ທ່ານສາມາດການປ່ຽນຄວາມຍາວໃຫ້ 100% (ແລະໃຊ້ໃນສະໜາມນ້ອຍ) overflow:auto ເພື່ອເປີດການຫົວໜ້າ).

ພວກເຮົາບໍ່ໃຊ້ບາດການ ແຕ່ໃຊ້ box-shadow ທາງວັດຖຸກະຈາຍ ເພື່ອຫັນມືຖືລົງຕິດຄືກັບການສະແດງ "ກາກ". ພວກເຮົາຍັງໃຊ້ z-index ປະຕິບັດມືຖືລົງຕິດທີ່ກ່ອນສິ່ງອື່ນ.

ຄັ້ງທີສາມ - ສະເໜີ JavaScript:

/* ຖ້າຜູ້ນຳໃຊ້ຄົງຢູ່ບັນຕາສັນຍາລະບາດ ການປ່ຽນສະຖານະປິດ/ກະຈາຍມືຖືລົງຕິດ */
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}
// ຖ້າຜູ້ນຳໃຊ້ຄົງຢູ່ພາຍນອກມືຖືລົງຕິດ ການປິດມືຖືລົງຕິດ
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

ພະຍາຍາມຕົວເອງ

相关页面

教程：CSS 下拉菜单

教程：如何可悬停的下拉菜单