<details>: Das Details-Offenlegungselement

Ein <details> Widget kann in einem von zwei Zuständen sein. Der Standardzustand geschlossen zeigt nur das Dreieck und das Etikett innerhalb <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, "dreht" es sich auf, um seinen Inhalt zu enthüllen. Der übliche Gebrauch eines Dreiecks, das sich dreht oder verdreht, um das Öffnen oder Schließen des Widgets darzustellen, ist der Grund, warum diese manchmal "Twisty" genannt werden.

Sie können CSS verwenden, um das Offenlegungs-Widget 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 Methode, um den Übergang zwischen geöffnetem und geschlossenem Zustand 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 standardskonforme Implementierungen wenden automatisch das CSS display: list-item auf das <summary> Element an. Sie können dies oder das ::marker Pseudo-Element verwenden, um das Offenlegungs-Widget anzupassen.

Dieses Element umfasst die globalen Attribute.

open

Dieses Boolean-Attribut gibt an, ob die Details – d.h. der Inhalt 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, weil dieses Attribut boolean ist.

name

Dieses Attribut ermöglicht, dass mehrere <details> Elemente verbunden werden, wobei jeweils nur ein Element geöffnet sein kann. Dies erlaubt Entwicklern, UI-Funktionen wie Akkordeons ohne Skripting einfach 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 schließt ein anderes. Wenn mehreren gruppierten <details> Elementen das open Attribut gegeben wird, wird nur das erste in der Quellenreihenfolge als geöffnet dargestellt.

Note: <details> Elemente müssen nicht benachbart zueinander im Quellcode sein, um Teil derselben Gruppe zu sein.

Zusätzlich zu den üblichen von HTML-Elementen unterstützten Ereignissen, unterstützt das <details> Element das toggle Ereignis, das an das <details> Element gesendet wird, wenn sich dessen Zustand zwischen offen und geschlossen ändert. Es wird nach der Zustandsänderung gesendet, obwohl, wenn sich der Zustand mehrmals ändert, bevor der Browser das Ereignis senden kann, die Ereignisse zusammengefasst werden, so dass nur eines gesendet wird.

Sie können einen Ereignislistener für das toggle Ereignis verwenden, um zu erkennen, wann das Widget den Zustand ändert:

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

Dieses Beispiel zeigt ein grundlegendes <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> Feld im geöffneten Zustand zu starten, fügen Sie das Boolean 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> Felder ein, alle mit demselben Namen, sodass jeweils nur eines geöffnet sein kann:

<details name="reqs">
  <summary>Graduation Requirements</summary>
  <p>
    Requires 40 credits, including a passing grade in health, geography,
    history, economics, and wood shop.
  </p>
</details>
<details name="reqs">
  <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="reqs">
  <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 Offenlegungs-Widgets zu öffnen. Wenn Sie eines öffnen, schließen sich alle anderen automatisch.

Nun lassen Sie uns etwas CSS anwenden, um das Erscheinungsbild des Offenlegungsfeldes 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 erstellt ein Aussehen, das einem Registerkarten-Interface ähnelt, bei dem durch Klicken auf die Registerkarte der Inhalt angezeigt wird.

Der Selektor details[open] kann verwendet werden, um das Element zu gestalten, das geöffnet ist.

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

Siehe die Seite <summary> für ein Beispiel zur Anpassung des Offenlegungs-Widgets.

• <summary>