كيفية إنشاء قائمة منسدلة باستخدام CSS و JavaScript

ستتعلم في هذا البرنامج التعليمي كيفية إنشاء قائمة منسدلة بسيطة باستخدام Vanilla Javascript و HTML و CSS. سننتقل عبر كود HTML و CSS و Javascript ، لكن مع إيلاء المزيد من الاهتمام للبرمجة ، لأن هذا هو برنامج تعليمي JS. سنستخدم فقط JS و CSS العادي ، بدون أطر عمل أو معالجات أولية. الاستثناء الوحيد (نوع من) هو استيراد ملف Font Awesome CSS لأننا سنستخدم أحد رموزه.

يستهدف هذا المطورين الذين لديهم فهم متوسط ​​لـ HTML و CSS و JS. حاولت أن أجعلها نظيفة قدر الإمكان ، لكنني لن أركز كثيرًا على التفاصيل هنا. أتمنى أن تستمتعوا جميعا

لقطات

هكذا تبدو نتيجة الكود:

الشاشة الأولي:

تم فتح القائمة المنسدلة:

قائمة منسدلة مع تحديد الخيار:

لغة البرمجة:

في هذا القسم ، سنناقش تنفيذ كود HTML لصفحة العرض. للبدء ، دعنا نرى الرمز

      Dropdown Example   

هذا أساسًا هو نموذج أساسي لـ HTML ، باستثناء linkالعلامات التي يتم تحميل صفحتي أنماط CSS التي سنستخدمها في هذا البرنامج التعليمي: أنماط Font Awesome ، styles.cssوالملف ، حيث سنحدد أنماط هذه الصفحة.

ثم هناك باقي ملف HTML ، النص الأساسي:

 Select an option  Option 1 Option 2 Option 3 Option 4 The result is:   ...   

يمكن تقسيم هذا القسم إلى 3 أجزاء رئيسية:

  • و .dropdownشعبة، حيث سيتم تحديد هيكل العنصر القائمة المنسدلة ل.
  • و #resultالعنصر، التي سوف تحتوي على الخيار المحدد من قبل المستخدم، من عنصر القائمة المنسدلة.
  • النص المكتوب في العلامة. يتم إخفاء تطبيقه هنا ، لأنه سيتم شرح تفاصيله في القسم الأخير من هذا البرنامج التعليمي.

عنصر القائمة المنسدلة divيحتوي على عناصر a titleو menu. يحدد الأول فقط النص الذي سيتم تقديمه على العنصر قبل تحديد أي خيار وسيحدد الأخير الخيارات التي سيتم تحديدها بواسطة العنصر.

و resultالعنصر هناك فقط لتظهر لك ما يتم تحديد الخيار حاليا.

الأنماط:

أدناه يمكنك التحقق من كود css الكامل. كما ترون أنه يجعل من استخدام CSS3 transitionو transformيبني.

يرجى الانتباه إلى .dropdownتعريفات الفئات. تُستخدم لتحديد تخطيط مكون حاوية القائمة المنسدلة بالإضافة إلى عناصره الداخلية ، مثل .titleو .option.

body{ font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; } .hide { max-height: 0 !important; } .dropdown{ border: 0.1em solid black; width: 10em; margin-bottom: 1em; } .dropdown .title{ margin: .3em .3em .3em .3em; width: 100%; } .dropdown .title .fa-angle-right{ float: right; margin-right: .7em; transition: transform .3s; } .dropdown .menu{ transition: max-height .5s ease-out; max-height: 20em; overflow: hidden; } .dropdown .menu .option{ margin: .3em .3em .3em .3em; margin-top: 0.3em; } .dropdown .menu .option:hover{ background: rgba(0,0,0,0.2); } .pointerCursor:hover{ cursor: pointer; } .rotate-90{ transform: rotate(90deg); }

جافا سكريبت:

الآن سنرى كيف يتم تنفيذ جزء Javascript. سننتقل أولاً إلى تعريفات الوظائف ثم الكود الذي يستدعي هذه الوظائف لإجراء الإجراءات المنسدلة.

في الأساس ، هناك 3 إجراءات تتم بناءً على تفاعل المستخدم ، حيث تتم إضافة مستمعيهم إلى عناصر DOM:

  1. النقر فوق عنصر القائمة المنسدلة
  2. تحديد أحد خيارات القائمة المنسدلة
  3. تغيير الخيار المحدد حاليًا

أود أن أوضح أننا نستخدم وظائف السهم ( () => {}) constوالكلمة الرئيسية ، وهي ميزات ES6. ربما تكون جيدًا إذا كنت تستخدم إصدارًا حديثًا من متصفحك ، ولكن ضع ذلك في الاعتبار.

1. النقر فوق عنصر القائمة المنسدلة

function toggleClass(elem,className){ if (elem.className.indexOf(className) !== -1){ elem.className = elem.className.replace(className,''); } else{ elem.className = elem.className.replace(/\s+/g,' ') + ' ' + className; } return elem; } function toggleDisplay(elem){ const curDisplayStyle = elem.style.display; if (curDisplayStyle === 'none' || curDisplayStyle === ''){ elem.style.display = 'block'; } else{ elem.style.display = 'none'; } } function toggleMenuDisplay(e){ const dropdown = e.currentTarget.parentNode; const menu = dropdown.querySelector('.menu'); const icon = dropdown.querySelector('.fa-angle-right'); toggleClass(menu,'hide'); toggleClass(icon,'rotate-90'); }

عند النقر على عنصر القائمة المنسدلة ، يفتح (إذا كان مغلقًا) أو يغلق (إذا كان مفتوحًا). يحدث هذا من خلال الربط toggleMenuDisplayمع مستمع حدث النقر في عنصر القائمة المنسدلة. تقوم هذه الوظيفة بتبديل عرض menuعنصرها باستخدام الدوال toggleDisplayو toggleClass.

2. تحديد أحد خيارات القائمة المنسدلة

function handleOptionSelected(e){ toggleClass(e.target.parentNode, 'hide'); const id = e.target.id; const newValue = e.target.textContent + ' '; const titleElem = document.querySelector('.dropdown .title'); const icon = document.querySelector('.dropdown .title .fa'); titleElem.textContent = newValue; titleElem.appendChild(icon); //trigger custom event document.querySelector('.dropdown .title').dispatchEvent(new Event('change')); //setTimeout is used so transition is properly shown setTimeout(() => toggleClass(icon,'rotate-90',0)); }

3. تغيير الخيار المحدد حاليًا

function handleTitleChange(e){ const result = document.getElementById('result'); result.innerHTML = 'The result is: ' + e.target.textContent; }

ترتبط الوظيفة بالحدث handleTitleChangeالمخصص changeعلى .titleالعنصر ، لتغيير #resultمحتوى العنصر كلما تغير عنصر العنوان. يتم تشغيل هذا الحدث في القسم السابق.

كود الرئيسي

//get elements const dropdownTitle = document.querySelector('.dropdown .title'); const dropdownOptions = document.querySelectorAll('.dropdown .option'); //bind listeners to these elements dropdownTitle.addEventListener('click', toggleMenuDisplay); dropdownOptions.forEach(option => option.addEventListener('click',handleOptionSelected)); document.querySelector('.dropdown .title').addEventListener('change',handleTitleChange);

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

تجريبي

يمكن العثور على الكود الكامل لهذا التطبيق والعروض التوضيحية هنا.

معلومات اكثر

  • مقدمة ES6
  • دالات السهم
  • اسمحوا و Const