Erstelle ein exklusives Akkordeon mit mehreren <details>
-Elementen, die dieselbe name
haben.
Das Akkordeon
Ein gängiges UI-Muster im Web ist eine Akkordeonkomponente. Dies ist eine Komponente, die aus mehreren Offenlegungs-Widgets besteht, die einzeln maximiert (oder minimiert) werden können, um ihren Inhalt ein- oder auszublenden.
Um dieses Muster im Web zu implementieren, kombinierst du einige <details>
-Elemente und gruppierst sie in der Regel visuell, um anzuzeigen, dass sie zusammengehören.
Das exklusive Akkordeon
Unterstützte Browser
- 120
- 120
- x
- 17.2
Eine Variante des Akkordeon-Musters ist das exklusive Akkordeon, bei dem nur eines der Offenlegungs-Widgets gleichzeitig geöffnet werden kann.
Um dies im Web zu erreichen, können Sie den <details>
-Elementen jetzt ein name
-Attribut hinzufügen. Wenn dieses Attribut verwendet wird, bilden mehrere <details>
-Elemente mit demselben name
-Wert eine semantische Gruppe und sie verhalten sich wie ein exklusives Akkordeon. Wenn du eines der <details>
-Elemente aus der Gruppe öffnest, wird das zuvor geöffnete Element automatisch geschlossen.
<details name="learn-css">
<summary>Welcome to Learn CSS!</summary>
<p>…</p>
</details>
<details name="learn-css">
<summary>Box Model</summary>
<p>…</p>
</details>
<details name="learn-css">
<summary>Selectors</summary>
<p>…</p>
</details>
Eine Seite kann mehrere exklusive Akkordeons enthalten. Immer wenn Sie einen neuen name
-Wert für ein <details>
-Element verwenden, wird eine neue logische Gruppe erstellt.
Beachte, dass die <details>
-Elemente, die Teil eines exklusiven Akkordeons sind, nicht unbedingt gleichgeordnete Elemente sein müssen. Sie können über das Dokument verteilt sein. Diese werden durch das Attribut name
gruppiert, nicht durch ihre DOM-Reihenfolge.
Polyfill für das exklusive Akkordeon
Mit dem folgenden JavaScript-Code ist es möglich, das Verhalten des exklusiven Akkordeons zu füllen. Der Code basiert auf dem toggle
-Ereignis des <details>
-Elements.
Wenn ein <details>
-Element mit einem name
-Element geöffnet wird, sucht der Code nach den anderen offenen <details>
-Elementen mit demselben Wert für das name
-Attribut und schließt sie.
document.querySelectorAll("details[name]").forEach(($details) => {
$details.addEventListener("toggle", (e) => {
const name = $details.getAttribute("name");
if (e.newState == "open") {
document
.querySelectorAll(`details[name=${name}][open]`)
.forEach(($openDetails) => {
if (!($openDetails === $details)) {
$openDetails.removeAttribute("open");
}
});
}
});
});
Bei einigen älteren Browserversionen wird dieses toggle
-Ereignis nicht ausgelöst. In diesen Browsern bewirkt der Polyfill-Code nichts. Im Hinblick auf Progressive Enhancement ist dies akzeptabel.