<summary>: عنصر SUMMARY
آخر تحديث: 2026-10-13
<summary>عنصر SUMMARY
بصفته أول طفل لـ details، هو العنوان المرئي الذي ينقر عليه المستخدم لتبديل الأداة.
| الفئة | دلالي |
|---|---|
| نموذج المحتوى | فقط كأول طفل لـ details |
| العناصر الأم المسموحة | أي عنصر يقبل المحتوى التدفقي |
| وسم الإغلاق | نعم — يتطلب إغلاق </summary> وسم |
| الحالة | قياسي |
📝 البنية
<summary>عنوان الملخص</summary>▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفح
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| <summary> | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
نصيحة： يجب أن يكون summary أول طفل داخل details؛ بدونه يعرض المتصفح تسمية عامة.
❓ الأسئلة الشائعة
Qهل لا يُستخدم summary إلا داخل details؟
Aنعم، لا يقبل
<summary> إلا أن يكون أول عنصر ابن لـ <details>، ومنفردًا لا معنى له. إنه «شريط العنوان» للوحدة القابلة للطي، وسلوك النقر للفتح والطي أصيل في المتصفح بلا JS.Qهل يمكن وضع عنوان وأيقونة داخل summary؟
Aنعم. يقبل
<summary> العناوين والمحتوى مستوى العبارة، مثل <summary><h3>الشرط الأول</h3></summary>، وكذلك <span> بأيقونة. وانتبه: إنه يطغى على مؤشر المثلث الافتراضي للمتصفح فيلزمك تعويض السهم بنفسك.Qكيف تزيل سهم summary الافتراضي؟
Aبـ CSS:
summary { list-style: none; }، وفي نوى WebKit أضف summary::-webkit-details-marker { display: none; }. ثم استخدم ::before/::after لمؤشر مخصص، مع تبديل اتجاه السهم عبر details[open].🏷️ وسوم ذات صلة
💡 حالات ذات صلة
المزيد من الحالات قادمة قريبًا — ترقبوا.
📚 دروس ذات صلة
