القائمة المنسدلة

جزء من قسم JavaScript in Action في رحلة HTML على Coddy — الدرس 4 من 27.

مكون القائمة المنسدلة هو عنصر واجهة مستخدم شائع يكشف عن محتوى إضافي عند النقر عليه.

ابدأ بإنشاء هيكل HTML للقائمة المنسدلة:

<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>

أضف بعض لغة CSS الأساسية لتنسيق القائمة المنسدلة:

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

الآن، أضف JavaScript لتبديل القائمة المنسدلة:

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

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

عند النقر على الزر، تقوم JavaScript بإضافة أو إزالة فئة 'show'، والتي تتحكم في ظهور القائمة المنسدلة.

التحدي

سهل

مهمتك:

أضف الخيار الثالث المسمى “Logout” مع الفئة logout إلى القائمة المنسدلة.
أكمل مستمع حدث النقر (click event listener) عن طريق إضافة السطر الذي يقوم بتبديل الفئة "show" في القائمة المنسدلة.

جرّب بنفسك

<!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>