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

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

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

أولاً، لنقم بإنشاء هيكل 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 لتبديل ظهور القائمة المنسدلة:

// الحصول على زر تبديل القائمة المنسدلة
const dropdownToggle = document.querySelector('.dropdown-toggle');

// الحصول على القائمة المنسدلة
const dropdownMenu = document.querySelector('.dropdown-menu');

// إضافة مستمع لحدث النقر إلى زر التبديل
dropdownToggle.addEventListener('click', function() {
  // تبديل فئة 'show' في القائمة المنسدلة
  dropdownMenu.classList.toggle('show');
});

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

.dropdown-menu {
  display: none;
}

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

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

التحدي

سهل

قم بإنشاء قائمة منسدلة تظهر/تختفي عند النقر فوق زر.

الخطوات:

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