Looge sisu peitmiseks ja kuvamiseks ainult HTML-iga akordion (ilma JS-i ega CSS-ita)

in Ressursid ja tööriistad

Kas teadsite, et on olemas natiivne HTML5-lahendus, mille abil saab väga lihtsalt luua akordioni loe rohkem/vähem nuppu, millega sisu peita ja paljastada JavaScripti ega CSS-i EI OLE. Lugege edasi, et teada saada, kuidas.

html5 akordion

. ja HTML5 sildid on ametlikult a avalikustamise vidina element, Kuid paaritatud HTML5 sildid annavad teile a puhas HTML-akordion.

Tähendus pole JS-i ega CSS-i on vaja. Kui lahe see on!

Siin on näide, mis näitab lihtsat elementi koos a ja .

Siin on kood:

<details>
 <summary>Read More</summary>
  <p>This is a native HTML5 accordion to hide and reveal content. Pretty cool, right?</p>
</details>

ja nii see välja näeb:

Loe rohkem

See on omapärane HTML5 akordion sisu peitmiseks ja paljastamiseks. Päris lahe, eks?

Kuidas see toimib? .  silt toimib avatava või sulgetava elemendi ümbrisena. Kasutaja peab klõpsama sildil, mis on elemendi avamiseks või sulgemiseks.

Kuidas on lood stiili ja käitumisega?

Stiilid

Saate rakendada CSS-stiili, et kohandada paljastamise tekstikasti välimust. Allpool on toodud vahekaartidega liidese stiil:

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;
}

Vaikimisi kuvatakse kursor noolena, kuid kui soovite, et see oleks a osutav käsi selle asemel kasutage seda:

details {
cursor: pointer;
}

Käitumine

Käitumise seadistamine on väga piiratud, tegelikult saate teha ainult ühte asja ja see on ilmutatud teksti koostamine vaikimisi avatud.

Akordioni käivitamiseks avatud olekus lisage Boolean avatud atribuut silt:

<details open>
 <summary>Read More</summary>
  <p>This is a native HTML5 accordion to hide and reveal content. Pretty cool, right?</p>
</details>
Loe rohkem

See on omapärane HTML5 akordion sisu peitmiseks ja paljastamiseks. Päris lahe, eks?

Milliseid atribuute saan kasutada?

Alltoodud atribuute saab kasutada silt:

AtribuutVäärtuskokkuvõte
avatudavatudVaikimisi on suletud.
id  väärtusAnnab kordumatu identifikaatori.
klass  klassinimedMäärab elemendile klassinimed.
stiil  CSS-väärtusedMäärab elemendile CSS-stiile.

Millised on siis piirangud? Alati on konks, kas pole?

Internet Exploreri tugi puudub

See ainult HTML5-ga akordion ei tööta üheski Internet Exploreri versioonis. Kui teil peab olema see IE11 tugi, peate JQuery abil kasutama teistsugust varulahendust. Kõik teised brauserid toetavad ja .

Pole kohandatud animatsioone ega üleminekuid

Kuigi saate välimust muuta ja stiilida (nagu ülal näidatud), ei saa te tekstiga animatsioone ega üleminekuid näidata. Kui soovite seda teha, vajate teist CSS/JSS akordionilahendust.

Ekraanilugerid ja juurdepääsetavus

See on emakeel HTML5 ja see *peaks olema* juurdepääsetav, kuid on leitud, et ekraanilugeja ei teata tegelikku teksti alati õigesti.

viited:

Teave Autor:

Matt Ahlgren

Mathias Ahlgren on ettevõtte tegevjuht ja asutaja Website Rating, mis juhib ülemaailmset toimetajate ja kirjanike meeskonda. Tal on infoteaduse ja juhtimise magistrikraad. Tema karjäär pöördus SEO poole pärast varajast veebiarenduse kogemust ülikooli ajal. Üle 15 aasta SEO, digitaalse turunduse ja veebiarendajate alal. Tema fookuses on ka veebisaitide turvalisus, mida tõendab küberturvalisuse sertifikaat. Need mitmekesised teadmised on tema juhtimise aluseks Website Rating.

Olge kursis! Liituge meie uudiskirjaga
Tellige kohe ja saate tasuta juurdepääsu ainult tellijatele mõeldud juhenditele, tööriistadele ja ressurssidele.
Saate tellimusest igal ajal loobuda. Teie andmed on turvalised.
Olge kursis! Liituge meie uudiskirjaga
Tellige kohe ja saate tasuta juurdepääsu ainult tellijatele mõeldud juhenditele, tööriistadele ja ressurssidele.
Saate tellimusest igal ajal loobuda. Teie andmed on turvalised.
Jaga...