كيفية إنشاء: عناصر قائمة قابلة للإغلاق

تعرف على كيفية استخدام JavaScript لإغلاق عناصر القائمة.

كيفية إنشاء عنصر قائمة قابلة للإغلاق

الخطوة الأولى - إضافة HTML：

<ul>
  <li>أديل</li>
  <li>أغنيس<span class="close">x</span></li>
  <li>بيلي<span class="close">x</span></li>
  <li>بوب<span class="close">x</span></li>
  <li>Calvin<span class="close">x</span></li>
  <li>Christina<span class="close">x</span></li>
  <li>Cindy</li>
</ul>

الخطوة الثانية - إضافة CSS:

* {
  حجم الصندوق: الحجم الداخلي;
}
/* تعيين نمط القائمة (إزالة الهوامش والنقاط من القائمة إلخ) */
ul {
  نوع القائمة: لا شيء;
  حجم الهوامش: 0;
  الإضافات: 0;
}
/* تعيين النمط للعناصر في القائمة */
ul li {
  الحواف: 1px سماكة، خط رأسي #ddd;
  الإضافات العلوية: -1px; /* لتجنب الحواف الثنائية */
  لون الخلفية: #f6f6f6;
  حجم الهوامش: 12px;
  تزيين النص: لا شيء;
  حجم النص: 18px;
  لون النص: أسود;
  العرض: حجرة;
  الوضع: نسبي;
}
/* إضافة لون خلفية رمادي فاتح عند التمرير بالفأرة */
ul li:hover {
  لون الخلفية: #eee;
}
/* تعيين النمط للزر الإغلاق (span) */
.close {
  المؤشر: يد;
  الوضع: مطلق;
  العلوي: 50%;
  اليمين: 0%;
  حجم الهوامش: 12px 16px;
  تحويل: تابع(0%, -50%);
}
.close:hover {background: #bbb;}

الخطوة الثالثة - إضافة JavaScript:

// الحصول على جميع العناصر التي تحتوي على class="close"
var closebtns = document.getElementsByClassName("close");
var i;
// تدوير العناصر، وإخفاء العنصر الأب عند النقر
for (i = 0; i < closebtns.length; i++) {
  closebtns[i].addEventListener("click", function() {
    هذا.parentElement.style.display = 'none';
  });
}

تجربة بنفسك