انتقل إلى محتوى الدرس

Managing Initial State with Open التحكم في الحالة الأولية للقوائم

تعلم استخدام العناصر التفاعلية الأصيلة في HTML: أتقن بناء القوائم المطوية بـ details و summary، والنوافذ الحوارية dialog بالطبقة العليا، وأزرار التحكم التصريحية، وميزة القوائم المنبثقة popover.
4 صفوف تعليمية
لغة HTML
1 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي
يظهر عنصر <details> في حالته الافتراضية مطوياً ومغلقاً. ولعرض المحتوى الداخلي مفتوحاً وموسعاً منذ اللحظة الأولى لتحميل الصفحة، يضيف المطورون الخاصية المنطقية open مباشرة إلى وسم البداية.
الصف 2 كود برمجي
HTML
<!-- Initially expanded details widget -->
<details open>
  <summary>System Requirements</summary>
  <p>Requires an HTML5-compliant web browser.</p>
</details>
الصف 3 شرح توضيحي
في معايير HTML الحديثة، يؤدي إسناد خاصية اسم name مشتركة لعدة عناصر تفاعلية إلى تحويلها إلى مجموعة أكورديون حصرية؛ حيث يؤدي فتح أي قسم تلقائياً إلى إغلاق كافة الأقسام المجاورة الأخرى المشتركة في نفس الاسم دون الحاجة لأي كود برمجي إضافي.
الصف 4 ملاحظة هامة