Danh sách thả xuống

Thuộc phần JavaScript trong thực tế trong hành trình HTML của Coddy. Bài học 4 trên 27.

Thành phần danh sách thả xuống là một phần tử giao diện người dùng phổ biến, hiển thị thêm nội dung khi được nhấp vào.

Đầu tiên, hãy tạo cấu trúc HTML cho menu thả xuống:

<div class="dropdown">
  <button class="dropdown-toggle">Select an option</button>
  <div class="dropdown-menu">
    <a href="#">Option 1</a>
    <a href="#">Option 2</a>
    <a href="#">Option 3</a>
  </div>
</div>

Thêm một chút CSS cơ bản để định kiểu cho danh sách thả xuống:

.dropdown {
  position: relative;
  display: inline-block;
}
.dropdown-menu {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  z-index: 1;
}
.show {
  display: block;
}

Bây giờ, hãy thêm JavaScript để bật hoặc tắt menu thả xuống:

const dropdownToggle = document.querySelector('.dropdown-toggle');
const dropdownMenu = document.querySelector('.dropdown-menu');

dropdownToggle.addEventListener('click', function() {
  dropdownMenu.classList.toggle('show');
});

Khi bạn nhấp vào nút, JavaScript thêm hoặc xóa lớp 'show', lớp này điều khiển khả năng hiển thị của menu thả xuống.

Thử thách

Dễ

Nhiệm vụ của bạn:

Thêm tùy chọn thứ ba có tên “Logout” với lớp logout vào menu thả xuống.
Hoàn thành trình lắng nghe sự kiện nhấp bằng cách thêm dòng chuyển đổi lớp "show" trên menu thả xuống.

Tự làm thử

<!DOCTYPE html>
<html>
<head>
  <title>Dropdown Challenge</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <h2>Welcome to the Dashboard</h2>
  <p>Click the button below to open your profile menu:</p>

  <div id="profileDropdown" class="dropdown">
    <button class="dropdown-toggle">
      My Profile
    </button>
    <div class="dropdown-menu">
      <a href="#">View Profile</a>
      <a href="#">Settings</a>
    </div>
  </div>

    <script src="script.js"></script>
</body>
</html>