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

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

Dropdown هي مكوّنات في واجهة المستخدم تكشف عن خيارات إضافية عند تفعيلها. تُستخدم عادةً في التنقّل لتنظيم المحتوى دون شغل مساحة كبيرة.

أولًا، لننشئ بنية HTML لقائمة منسدلة أساسية:

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

والآن، لنضف JavaScript لتبديل مستوى رؤية القائمة المنسدلة:

// Get the dropdown toggle button
const dropdownToggle = document.querySelector('.dropdown-toggle');

// Get the dropdown menu
const dropdownMenu = document.querySelector('.dropdown-menu');

// Add click event listener to the toggle button
dropdownToggle.addEventListener('click', function() {
  // Toggle the 'show' class on the dropdown menu
  dropdownMenu.classList.toggle('show');
});

أخيرًا، أضف بعض CSS الأساسي لإخفاء/إظهار قائمة dropdown menu:

.dropdown-menu {
  display: none;
}

.dropdown-menu.show {
  display: block;
}

عند النقر على زر "Menu"، ستظهر قائمة dropdown. وسيؤدي النقر عليها مرة أخرى إلى إخفاء القائمة.

التحدي

سهل

أنشئ قائمة منسدلة تُظهر/تخفي المحتوى عند النقر على زر.

الخطوات:

في HTML:
- أضف السمة onclick إلى الزر، بحيث تستدعي دالة باسم toggleDropdown عند النقر عليها
في JavaScript:
- أنشئ دالة باسم toggleDropdown
- داخل الدالة، بدّل حالة الفئة "show" للعنصر ذي المعرّف “myDropdown”

جرّب بنفسك

<!DOCTYPE html>
<html>
<head>
  <title>Save the Forests</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h1>Save the Forests</h1>
    <p>Even planting one or two trees makes a difference.</p>
  </header>

  <div class="dropdown">
    <button class="dropbtn">Learn More ▼</button>
    <div id="myDropdown" class="dropdown-content">
      <a href="#">Why forests matter</a>
      <a href="#">How to grow a tree</a>
      <a href="#">Community projects</a>
    </div>
  </div>

  <main>
    <section>
      <h2>Why Trees Are Important</h2>
      <p>
        Forests clean our air, give us oxygen, and are home to countless animals.  
        Each tree you plant helps fight climate change and supports life on Earth.
      </p>
    </section>
    <section>
      <h2> Start Small</h2>
      <p>
        Don’t wait for a big change. Start with just one or two trees in your yard or community.  
        Your small action inspires others!
      </p>
    </section>
  </main>

  <footer>
    <p> Together we can make the planet greener.</p>
  </footer>

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