แบบฝึกเรียน: รายการดรอปดาวที่สามารถคลิกได้

第二步 - 添加 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 容器中） */
/* แสดงเมนูด้านลง (เมื่อผู้ใช้คลิกที่ปุ่มด้านลง ใช้ JS ใส่คลาสนี้ลงในโครงโครง .dropdown-content) */

.show {display:block;}

ตัวอย่างชี้แจง:

เราตั้งสไตล์สำหรับปุ่มด้านลงเช่น สีพื้นหลัง ระยะเวลาเรียกใช้ และอื่นๆ คลาส) position:relativeเมื่อเราต้องการที่จะจัดเวลาเนื้อหาด้านลงให้อยู่ด้านล่างปุ่มด้านลง (ใช้ position:absolute) นี่เป็นสิ่งจำเป็น。

.dropdown-content คลาสที่มีเมนูด้านลงที่แท้จริง มันเรียกเร็วๆที่ซ่อนและจะแสดงขึ้นเมื่อเปิดโดยเมาส์ (ดูลงไปในนี้) โปรดจำที่ความกว้างของเมนูด้านลงมีค่าเท่ากับ 160px โดยคุณสามารถเปลี่ยนค่านี้ตามความต้องการ คำแนะนำ: ถ้าคุณต้องการให้ความกว้างของเนื้อหาด้านลงเหมือนปุ่มด้านลง คุณสามารถตั้งค่าความกว้างเป็น 100% (และใช้ overflow:auto เพื่อเปิดใช้งานการเลื่อน (scrolling)。

เราไม่ใช้เส้นขอบ แต่ใช้ box-shadow ของที่ทำให้เมนูด้านลงดูเหมือนใบ "บัตร" รวมถึงเราใช้ z-index จัดเวลาเมนูด้านลงให้อยู่ด้านหน้าอื่นๆ

ขั้นที่ 3 - เพิ่ม 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');
      }
    }
  }
}