<details>: Das Details-Element zur Offenlegung

<details> <summary>Details</summary> Something small enough to escape casual notice. </details> 

details { border: 1px solid #aaa; border-radius: 4px; padding: 0.5em 0.5em 0; } summary { font-weight: bold; margin: -0.5em -0.5em 0; padding: 0.5em; } details[open] { padding: 0.5em; } details[open] summary { border-bottom: 1px solid #aaa; margin-bottom: 0.5em; } 

Ein <details>-Widget kann in einem von zwei Zuständen sein. Der Standardzustand geschlossen zeigt nur das Dreieck und das Label innerhalb von <summary> an (oder eine vom User-Agent definierte Standardzeichenfolge, wenn kein <summary> vorhanden ist).

Wenn der Benutzer auf das Widget klickt oder es fokussiert und dann die Leertaste drückt, "verdreht" es sich und offenbart seinen Inhalt. Die übliche Verwendung eines Dreiecks, das sich dreht oder verdreht, um das Öffnen oder Schließen des Widgets darzustellen, ist der Grund, warum diese manchmal als "Twisty" bezeichnet werden.

Sie können CSS verwenden, um das Offenlegungselement zu gestalten, und Sie können das Widget programmatisch öffnen und schließen, indem Sie sein open-Attribut setzen/entfernen. Leider gibt es derzeit keine eingebaute Möglichkeit, den Übergang zwischen offen und geschlossen zu animieren.

Standardmäßig ist das Widget im geschlossenen Zustand nur hoch genug, um das Offenlegungsdreieck und die Zusammenfassung anzuzeigen. Wenn es geöffnet ist, erweitert es sich, um die darin enthaltenen Details anzuzeigen.

Vollständig standardkonforme Implementierungen wenden automatisch das CSS display: list-item auf das <summary>-Element an. Sie können dieses oder das ::marker-Pseudoelement verwenden, um das Offenlegungselement anzupassen.

Dieses Element umfasst die globalen Attribute.

open

Dieses boolesche Attribut gibt an, ob die Details — das heißt, die Inhalte des <details>-Elements — derzeit sichtbar sind. Die Details werden angezeigt, wenn dieses Attribut existiert, oder verborgen, wenn dieses Attribut fehlt. Standardmäßig fehlt dieses Attribut, was bedeutet, dass die Details nicht sichtbar sind.

Hinweis: Sie müssen dieses Attribut vollständig entfernen, um die Details auszublenden. open="false" macht die Details sichtbar, da dieses Attribut boolesch ist.

name

Dieses Attribut ermöglicht es, mehrere <details>-Elemente zu verbinden, wobei immer nur eines geöffnet werden kann. Dies ermöglicht es Entwicklern, UI-Features wie Akkordeons einfach ohne Skripterstellung zu erstellen.

Das name-Attribut gibt einen Gruppennamen an — geben Sie mehreren <details>-Elementen denselben name-Wert, um sie zu gruppieren. Nur eines der gruppierten <details>-Elemente kann gleichzeitig geöffnet sein — das Öffnen eines führt zum Schließen eines anderen. Wenn mehreren gruppierten <details>-Elementen das open-Attribut gegeben wird, wird nur das erste in der Quellreihenfolge als geöffnet gerendert.

Hinweis: <details>-Elemente müssen nicht nebeneinander im Quelltext stehen, um Teil derselben Gruppe zu sein.

Zusätzlich zu den üblichen Ereignissen, die von HTML-Elementen unterstützt werden, unterstützt das <details>-Element das toggle-Ereignis, das immer dann an das <details>-Element gesendet wird, wenn sich sein Zustand zwischen offen und geschlossen ändert. Es wird nachdem der Zustand geändert wurde gesendet, obwohl, wenn sich der Zustand mehrfach ändert, bevor der Browser das Ereignis senden kann, die Ereignisse zusammengefasst werden, sodass nur eines gesendet wird.

Sie können einen Eventlistener für das toggle-Ereignis verwenden, um zu erkennen, wann sich der Status des Widgets ändert:

details.addEventListener("toggle", (event) => { if (details.open) { /* the element was toggled open */ } else { /* the element was toggled closed */ } }); 

Dieses Beispiel zeigt ein einfaches <details>-Element mit einem <summary>.

<details> <summary>System Requirements</summary> <p> Requires a computer running an operating system. The computer must have some memory and ideally some kind of long-term storage. An input device as well as some form of output device is recommended. </p> </details> 

Ergebnis

Um das <details>-Element im offenen Zustand zu starten, fügen Sie das boolesche open-Attribut hinzu:

<details open> <summary>System Requirements</summary> <p> Requires a computer running an operating system. The computer must have some memory and ideally some kind of long-term storage. An input device as well as some form of output device is recommended. </p> </details> 

Ergebnis

Wir fügen mehrere <details>-Elemente hinzu, alle mit demselben Namen, sodass immer nur eines gleichzeitig geöffnet werden kann:

<details name="requirements"> <summary>Graduation Requirements</summary> <p> Requires 40 credits, including a passing grade in health, geography, history, economics, and wood shop. </p> </details> <details name="requirements"> <summary>System Requirements</summary> <p> Requires a computer running an operating system. The computer must have some memory and ideally some kind of long-term storage. An input device as well as some form of output device is recommended. </p> </details> <details name="requirements"> <summary>Job Requirements</summary> <p> Requires knowledge of HTML, CSS, JavaScript, accessibility, web performance, privacy, security, and internationalization, as well as a dislike of broccoli. </p> </details> 

Ergebnis

Versuchen Sie alle Offenlegungselemente zu öffnen. Wenn Sie eines öffnen, schließen sich automatisch alle anderen.

Lassen Sie uns jetzt etwas CSS anwenden, um das Aussehen des Offenlegungselements anzupassen.

CSS

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

Dieses CSS erzeugt ein Aussehen ähnlich einer Registerkartenschnittstelle, bei der durch Klicken auf die Registerkarte geöffnet wird, um den Inhalt anzuzeigen.

HTML

<details> <summary>System Requirements</summary> <p> Requires a computer running an operating system. The computer must have some memory and ideally some kind of long-term storage. An input device as well as some form of output device is recommended. </p> </details> 

Ergebnis

Sehen Sie sich die <summary>-Seite für ein Beispiel zur Anpassung des Offenlegungselements an.

• <summary>
• ::details-content