عنصر HTML: جزئیات | Envato Tuts+

HTML <details> عنصر یک “ویجت افشا” را نشان می دهد که کاربر می تواند اطلاعات یا کنترل های اضافی را از آن به دست آورد. این به شما امکان می دهد بخش های قابل جمع شدنی از محتوا را در یک صفحه وب ایجاد کنید و روشی تعاملی برای پنهان کردن یا آشکار کردن محتوا در صورت نیاز ارائه می دهد.

نحو

نحو اولیه برای <details> عنصر به شرح زیر است:

1

<details>

2

  <summary>Click to toggle</summary>

3

  <!-- Content to be revealed or hidden -->

4

</details>

را <details> عنصر باید حاوی الف باشد <summary> عنصر به عنوان اولین فرزندش محتوایی که قرار است فاش یا پنهان شود بعد از قرار داده می شود <summary> عنصر و می تواند مانند اکثر محتوای معمولی علامت گذاری شود. آ <p>، آ <div>، یک <img>، و غیره.

مثال

در اینجا یک مثال ساده با تقریباً هیچ استایلی آورده شده است. نشان می دهد که چگونه <details> عنصر را می توان با دو مورد استفاده کرد <summary> عناصری که هر کدام الف را آشکار می کنند <p> هنگام کلیک کردن:

در اینجا یک مثال دوم، با نشانه گذاری HTML کمی بیشتر، به منظور آسان کردن یک ظاهر طراحی با CSS است. این نسخه ی نمایشی از آموزش ساختن آکاردئون HTML (بدون CSS یا جاوا اسکریپت) توسط Jemima Abu گرفته شده است.

ویژگی های

را <details> عنصر از ویژگی های زیر پشتیبانی می کند:

• open: مشخص می کند که هنگام بارگذاری صفحه، جزئیات باید قابل مشاهده باشند. این ویژگی به مقدار نیاز ندارد و می‌تواند به این صورت گنجانده شود: <details open>

محتوا

را <details> عنصر می تواند حاوی محتوای HTML مانند متن، تصاویر، لیست ها، جداول و موارد دیگر باشد. شما می توانید عناصر HTML معتبر را در داخل قرار دهید <details> عنصری برای ارائه محتوای مورد نظر که آشکار یا پنهان می شود.

آیا میدانستید؟

• را <details> عنصر معمولاً برای ایجاد بخش‌های جمع‌شونده مانند سؤالات متداول (پرسش‌های متداول)، بخش‌های اطلاعات اضافی یا محتوای اسپویلر استفاده می‌شود.
• هنگام استفاده از <details> عنصر، خلاصه باید مختصر باشد و به وضوح نشان دهد که با کلیک کردن چه چیزی آشکار یا پنهان می شود.
• شما می توانید ظاهر ویجت افشا را با استفاده از CSS برای سفارشی کردن نمایش بصری آن استایل دهید.

طراحی ظاهر

به طور پیش فرض، <summary> عنصر از text مکان نما این را به a تغییر دهید pointer مکان نما به کاربر نشان می دهد که این یک عنصر تعاملی است.

1

details summary {

2

  cursor: pointer;

3

}

بیشتر بدانید