Tiesitkö, että on olemassa natiivi HTML5-ratkaisu, jolla voit helposti luoda haitarille enemmän/vähemmän -painikkeen sisällön piilottamiseksi ja paljastamiseksi EI JavaScriptiä tai CSS:ää. Lue lisää saadaksesi selville, miten.
- ja HTML5-tunnisteet ovat virallisesti a ilmoitus-widget-elementti, Mutta pariksi kanssa HTML5-tunnisteet antavat sinulle a puhdasta HTML-harmonikkaa.
Merkitys ei JS tai CSS tarvitaan. Kuinka siistiä!
Tässä on esimerkki yksinkertaisesta elementistä, jossa on a ja .
Tässä koodi:
<details>
<summary>Read More</summary>
<p>This is a native HTML5 accordion to hide and reveal content. Pretty cool, right?</p>
</details>ja tältä se näyttää:
Lue lisää
Tämä on natiivi HTML5-haitari sisällön piilottamiseen ja paljastamiseen. Aika siistiä, eikö?
Miten tämä toimii? - tag toimii kääreenä elementille, joka voidaan avata tai sulkea. Käyttäjän on napsautettava etikettiä, joka on -tunniste avataksesi tai sulkeaksesi elementin.
Entä tyyli ja käytös?
Tyylit
Voit mukauttaa paljastavan tekstiruudun ulkoasua CSS-tyylillä. Alla on välilehdellä varustettu käyttöliittymätyyli:
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;
}Oletusarvon mukaan kohdistin näyttää nuolena, mutta jos haluat sen olevan a osoittava käsi käytä sen sijaan tätä:
details {
cursor: pointer;
}käyttäytymistä
Käyttäytymisen asettaminen on hyvin rajallista, voit tehdä vain yhden asian ja se on tehdä paljastettu teksti oletuksena auki.
Käynnistä haitari sen avoimessa tilassa lisäämällä Boolen avata ominaisuus tunnisteet:
<details open>
<summary>Read More</summary>
<p>This is a native HTML5 accordion to hide and reveal content. Pretty cool, right?</p>
</details>Lue lisää
Tämä on natiivi HTML5-haitari sisällön piilottamiseen ja paljastamiseen. Aika siistiä, eikö?
Mitä ominaisuuksia voin käyttää?
Alla olevia määritteitä voidaan käyttää tunnisteet:
| Ominaisuus | Arvo | Yhteenveto |
|---|---|---|
| avata | avata | Oletus on ei auki. |
| id | arvo | Tarjoaa yksilöllisen tunnisteen. |
| luokka | luokkien nimet | Antaa elementille luokkien nimet. |
| tyyli | CSS-arvot | Määrittää elementille CSS-tyylejä. |
Joten mitkä ovat rajoitukset? Aina on saalis, eikö?
Ei tukea Internet Explorerille
Tämä vain HTML5:lle tarkoitettu haitari ei toimi missään Internet Explorerin versiossa. Jos sen on tuettava IE11:tä, sinun on käytettävä toista vararatkaisua JQueryn avulla. Kaikki muut selaimet tukevat ja .
Ei mukautettuja animaatioita tai siirtymiä
Vaikka voit muokata ulkoasua ja tyyliä (kuten yllä näkyy), et voi tehdä tekstistä, joka paljastaa animaatioita tai siirtymiä. Jos haluat tehdä niin, tarvitset toisen CSS/JSS harmonikkaratkaisun.
Näytönlukijat ja esteettömyys
Tämä on syntyperäinen HTML5 ja sen *pitäisi olla* saavutettavissa, mutta on havaittu, että näytönlukuohjelma ei aina ilmoita todellista paljastettua tekstiä oikein.
Viitteet:
