Ar žinojote, kad yra vietinis HTML5 sprendimas, leidžiantis labai lengvai sukurti akordeono skaitymo daugiau/mažiau mygtuką, kad paslėptumėte ir atskleistumėte turinį NĖRA JavaScript ar CSS. Skaitykite toliau, kad sužinotumėte, kaip.
Šios ir HTML5 žymos oficialiai yra a atskleidimo valdiklio elementas, Tačiau suporuotas su HTML5 žymos suteiks jums a grynas HTML akordeonas.
Tai reiškia, nėra JS AR CSS yra reikalingas. Argi tai ne šaunu!
Štai pavyzdys, rodantis paprastą elementą su a ir .
Štai kodas:
<details>
<summary>Read More</summary>
<p>This is a native HTML5 accordion to hide and reveal content. Pretty cool, right?</p>
</details>ir štai kaip jis atrodys:
Skaityti daugiau
Tai vietinis HTML5 akordeonas, skirtas paslėpti ir atskleisti turinį. Gana šaunu, tiesa?
Kaip tai veikia? Šios žyma yra elemento, kurį galima atidaryti arba uždaryti, įvyniojimas. Vartotojas turi spustelėti etiketę, kuri yra žymą, kad atidarytumėte arba uždarytumėte elementą.
O kaip su stiliumi ir elgesiu?
Stilius
Galite pritaikyti CSS stilių, kad tinkintumėte atskleidimo teksto laukelio išvaizdą. Toliau pateikiamas sąsajos stilius su skirtukais:
details {
font: 16px "Open Sans", Calibri, sans-serif;
width: 620px;
}
details > summary {
padding: 2px 6px;
width: 15em;
background-color: #ddd;
border: none;
box-shadow: 3px 3px 4px black;
cursor: pointer;
}
details > p {
border-radius: 0 0 10px 10px;
background-color: #ddd;
padding: 2px 6px;
margin: 0;
box-shadow: 3px 3px 4px black;
}
details[open] > summary {
background-color: #ccf;
}Pagal numatytuosius nustatymus žymeklis atrodo kaip rodyklė, bet jei norite, kad jis būtų a rodanti ranka vietoj to naudokite tai:
details {
cursor: pointer;
}Elgesys
Elgesio nustatymas yra labai ribotas, iš tikrųjų galite padaryti tik vieną dalyką, tai yra sukurti atskleistą tekstą atidaryti pagal numatytuosius nustatymus.
Norėdami paleisti akordeoną atviroje būsenoje, pridėkite Būlio reikšmę atidaryti atributas žyma:
<details open>
<summary>Read More</summary>
<p>This is a native HTML5 accordion to hide and reveal content. Pretty cool, right?</p>
</details>Skaityti daugiau
Tai vietinis HTML5 akordeonas, skirtas paslėpti ir atskleisti turinį. Gana šaunu, tiesa?
Kokius atributus galiu naudoti?
Žemiau pateikti atributai gali būti naudojami žyma:
| atributas | Vertė | Santrauka |
|---|---|---|
| atidaryti | atidaryti | Numatytasis yra ne atviras. |
| id | kainas | Pateikiamas unikalus identifikatorius. |
| klasė | klasių pavadinimai | Elementui priskiria klasių pavadinimus. |
| stilius | CSS vertės | Elementui priskiria CSS stilius. |
Taigi kokie yra apribojimai? Visada yra kažkas, ar ne?
Nepalaikoma „Internet Explorer“.
Šis tik HTML5 skirtas akordeonas neveiks jokioje „Internet Explorer“ versijoje. Jei turite palaikyti IE11, turėsite naudoti kitą atsarginį sprendimą naudodami JQuery. Visos kitos naršyklės palaiko ir .
Jokių tinkintų animacijų ar perėjimų
Nors galite keisti išvaizdą ir stilių (kaip parodyta aukščiau), negalėsite atlikti jokio teksto, kad būtų atskleista animacija ar perėjimai. Jei norite tai padaryti, jums reikės kito CSS / JSS akordeono sprendimo.
Ekrano skaitytuvai ir pritaikymas neįgaliesiems
Tai yra gimtoji HTML5 ir jis *turėtų būti* pasiekiamas, tačiau buvo nustatyta, kad ekrano skaitytuvas ne visada teisingai praneša tikrąjį atskleistą tekstą.
Nuorodos:
