Snabb Påminnelse om att Information/Sammanfattning är det Enklaste Sättet Någonsin att Göra ett Dragspel

0
25

Jisses välsigna <detaljer> – elementet. Kasta del av innehållet i den och du har en tillgänglig expandera-för-mer interaktion med nästan noll arbete.

Se Pennan Enkla detaljer. av Chris Coyier (@chriscoyier) på CodePen.

Slänga <summary> i det att anpassa vad expander texten säger.

Se Pennan Flera Detaljer/Sammanfattning av Chris Coyier (@chriscoyier) på CodePen.

Fungerar bra för vanliga Frågor.

Det finns verkligen ingen gräns för hur du kan stil dem. Om du inte gillar den standard fokusringen, du kan ta bort det, men se till att sätta någon form av styling tillbaka.

Här har jag använt en header-element för varje utökningsbara avsnitt, som har fokus stat som härmar andra interaktiva element på sidan.

Den enda webbläsare som inte har stöd för detta är att Microsoft och kära (och Opera Mini som är vettigt—det är egentligen inte göra interaktiva).

Denna webbläsare har stöd för data är från Caniuse, som har mer i detalj. En rad anger att webbläsaren stöder den funktionen på denna version och upp.

Skrivbordet

ChromeOperaFirefoxIEEdgeSafari
12 15 49 Inga Inga 6

Mobil / Surfplatta

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

Men även då, det är precis som att alla sektioner är öppna, så det är inte en stor grej:

Vill stil som standard triangel? Konstigt nog är det vanliga sättet att göra det är genom list-style egenskaper. Utan att Blinka-baserade webbläsare har inte fångats upp till det ännu, så de har en egen väg att göra det. De kan kombineras dock. Här är ett exempel på att ersätta det med en bild:

sammanfattning {
list-style-image: url(höger-pil.svg);
}

sammanfattning::-webkit-detaljer-markör {
background: url(höger-pil.svg);
färg: transparent;
}

Se Pennan Egna Markörer på Information/Sammanfattning av Chris Coyier (@chriscoyier) på CodePen.

Tyvärr, de vänder inte, och det finns inget sätt att animera standard triangel heller. En idé kan vara att rikta fokus stat och byta bakgrund:

Se Pennan Egna Markörer på Information/Sammanfattning av Geoff Graham (@geoffgraham) på CodePen.

Men det verkar vara begränsad till WebKit och Blinka och, även då, kommer pilen att återkomma när objektet är i fokus även om objektet är fortfarande expanderade.