Apakah yang disediakan oleh elemen details dan summary?

Question

Accepted Answer

`

` dan `

` membuat **widget pendedahan asli** — bahagian yang boleh dikembangkan/diruntuhkan — dengan **sifar JavaScript**. Penyemak imbas mengendalikan togol, sokongan papan kunci, dan kebolehaksesan untuk anda. ```html

Click to expand

This content is hidden until the user opens it.

``` - **`

`** ialah label yang boleh diklik (anak pertama). - Segala yang berikutnya ialah kandungan yang boleh diruntuhkan. - Mengklik ringkasan beralih terbuka/tutup — boleh diakses papan kunci asli (Enter/Ruang) dan diumumkan dengan betul oleh pembaca skrin. ## Buka secara lalai & mengesani keadaan ```html

FAQ item

Answer...

``` ```js const d = document.querySelector("details"); d.open; // boolean: is it open? d.addEventListener("toggle", () => console.log(d.open)); // fires on open/close ``` ## Menggaya penanda ```css summary { cursor: pointer; } summary::marker { color: blue; } /* the triangle/arrow */ details[open] summary { font-weight: bold; } /* style when open */ ``` ## Kes penggunaan sebenar Akordion FAQ, bahagian "tunjukkan lebih banyak", bar sisi yang boleh diruntuhkan, teks spoiler, baris jadual yang boleh dikembangkan. Sebelum elemen ini, setiap akordion memerlukan JavaScript ditambah pendawaian ARIA untuk kebolehaksesan — kini hanya dua teg semantik. ## Mengapa Ia Penting `

`/`

` memberi anda kandungan yang boleh diruntuhkan yang boleh diakses dan mesra papan kunci tanpa JS dan tanpa ARIA manual — contoh sempurna menggunakan platform. Capaian untuk FAQ dan corak "tunjukkan lebih banyak" sebelum membina akordion tersuai.