Ką suteikia details ir summary elementai?

Question

Accepted Answer

`

` ir `

` sukuria **natyvią atskleidimo valdiklį** — išplečiamą/susupinamą dalį — su **nuliu JavaScript**. Naršyklė tvarko perjungimą, klaviatūros palaikymą ir pritaikomumą jums. ```html

Click to expand

This content is hidden until the user opens it.

``` - **`

`** yra spusteliojamas žymė (pirmas vaikas). - Viskas po to yra susupinamasis turinys. - Spustelėjus summary, natyviai perjungiama atidaryti/susupstas — pasiekiama klaviatūra (Enter/Space) ir teisingai paskelbta ekrano skaitytuvų. ## Atidaryti pagal numatymasiąjį ir aptikti būseną ```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 ``` ## Žymeklio stilius ```css summary { cursor: pointer; } summary::marker { color: blue; } /* the triangle/arrow */ details[open] summary { font-weight: bold; } /* style when open */ ``` ## Realūs naudojimo atvejai DUK akordeoni, "rodyti daugiau" dalys, susupinamos šoninės juostos, spoilerio tekstas, išplečiamos lentelės eilutės. Prieš šį elementą kiekvienas akordeonas reikalavo JavaScript ir ARIA sujungimo pritaikymui — dabar tai tik du semantiniai žymenys. ## Kodėl tai svarbu `

`/`

` suteikia jums prieinamą, klaviatūrą naudojantį susupinimą turinį be JS ir be rankinės ARIA — puikus platformos naudojimo pavyzdys. Pasiekite jį DUK ir "rodyti daugiau" šablonams prieš kuriant pasirinktinį akordeoną.