Rask Påminnelse om at Opplysninger/Oppsummering er den Enkleste Måten Noensinne å Ta et Trekkspill

0
54

Gosh velsigne <detaljer> – element. Kaste noe av innholdet i den og du har en tilgjengelig utvide for mer interaksjon med omtrent null arbeid.

Se Penn Enkle detaljer. ved Chris Coyier (@chriscoyier) på CodePen.

Kaste en <summary> i det å tilpasse hva ekspander teksten sier.

Se Penn Flere Detaljer/Oppsummering av Chris Coyier (@chriscoyier) på CodePen.

Fungerer bra for vanlige Spørsmål.

Det er egentlig ingen grenser for hvordan du kan style dem. Hvis du ikke liker standardinnstillingen fokus ringen, kan du fjerne det, men sørg for å sette noen form for styling tilbake.

Her har jeg brukt en topp-element for hver utvides del, som har et fokus staten som etterligner andre interaktive elementer på siden.

Den eneste nettleseren som støtter ikke dette er Microsoft kjære (og Opera Mini som er fornuftig—det gjør egentlig ikke gjøre interaktiv).

Denne nettleseren støtter data er fra Caniuse, som har mer detalj. Angir et nummer som nettleseren støtter funksjonen på denne versjonen, og opp.

Skrivebordet

ChromeOperaFirefoxIEEdgeSafari
12 15 49 Ingen Ingen 6

Mobil / Nettbrett

iOS SafariOpera MobileOpera MiniAndroidAndroid ChromeAndroid Firefox
6.0-6.1 37 Ingen 4 64 57

Men selv da, det er akkurat som alle delene er åpnet, så det er ikke en stor avtale:

Ønsker stil som standard trekant? Merkelig nok, den vanlige måten å gjøre det på er gjennom listen-stil egenskaper. Men Blink-baserte nettlesere ikke har fanget opp til det ennå, så de har en egen måte å gjøre det på. De kan være sammen om. Her er et eksempel for å erstatte det med et bilde:

oppsummering {
list-style-image: url(høyre-pilen.svg);
}

sammendrag::-webkit-detaljer-markør {
bakgrunn: url(høyre-pilen.svg);
farge: transparent;
}

Se Penn Tilpasset Markører på Detaljer/Oppsummering av Chris Coyier (@chriscoyier) på CodePen.

Dessverre, de ikke slår, og det er ingen måte å animere standard trekant. En idé kan være å målrette :fokus staten og bytte bakgrunn:

Se Penn Tilpasset Markører på Detaljer/Oppsummering av Geoff Graham (@geoffgraham) på CodePen.

Men det synes å være begrenset til WebKit og Blinke og selv da, pil vil komme tilbake når elementet er ute av fokus, selv om varen fortsatt er utvidet.