<details>: Das Details-Disclosure-Element

Ein <details> Widget kann sich in einem von zwei Zuständen befinden. Der Standardzustand geschlossen zeigt nur das Dreieck und die Beschriftung innerhalb von <summary> an (oder eine vom Benutzeragenten festgelegte Standardzeichenfolge, falls kein <summary> vorhanden ist).

Wenn der Benutzer auf das Widget klickt oder es fokussiert und dann die Leertaste drückt, wird es "aufgedreht" und der Inhalt wird sichtbar. Die übliche Verwendung eines Dreiecks, das sich dreht oder verdreht, um das Öffnen oder Schließen des Widgets darzustellen, erklärt, warum diese manchmal "Twisty" genannt werden.

Sie können CSS verwenden, um das Disclosure-Widget zu gestalten, und Sie können das Widget programmatisch öffnen und schließen, indem Sie das open Attribut setzen/entfernen. Leider gibt es derzeit keine integrierte Möglichkeit, den Übergang zwischen offenem und geschlossenem Zustand zu animieren.

Im geschlossenen Zustand ist das Widget standardmäßig nur hoch genug, um das Disclosure-Dreieck und die Zusammenfassung anzuzeigen. Im offenen Zustand wird es erweitert, 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 dies verwenden, um das Erscheinungsbild weiter anzupassen. Weitere Details finden Sie unter Anpassen des Disclosure-Widgets.

Dieses Element enthält die globalen Attribute.

open

Dieses Boolean-Attribut gibt an, ob die Details – also der Inhalt des <details> Elements – derzeit sichtbar sind. Die Details werden angezeigt, wenn dieses Attribut vorhanden ist, oder ausgeblendet, 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 ein Boolean ist.

name

Dieses Attribut ermöglicht die Verbindung mehrerer <details> Elemente, wobei jeweils nur eines geöffnet wird. Dies ermöglicht es Entwicklern, leicht UI-Funktionen wie Akkordeons ohne Skripte zu erstellen.

Das name Attribut gibt einen Gruppennamen an – geben Sie mehreren <details> Elementen den gleichen name Wert, um sie zu gruppieren. Nur eines der gruppierten <details> Elemente kann gleichzeitig geöffnet sein – das Öffnen eines schließt das andere. Wenn mehreren gruppierten <details> Elementen das open Attribut gegeben wird, wird nur das erste im Quellcode geöffnete angezeigt.

Hinweis: <details> Elemente müssen nicht nebeneinander im Quellcode sein, 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 an das <details> Element gesendet wird, wann immer sich sein Zustand zwischen offen und geschlossen ändert. Es wird nach dem Ändern des Zustands gesendet, obwohl, wenn sich der Zustand mehrmals ändert, bevor der Browser das Ereignis senden kann, die Ereignisse zusammengefasst werden, sodass nur eines gesendet wird.

Sie können einen Ereignis-Listener für das toggle Ereignis verwenden, um zu erkennen, wann sich der Zustand 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 die <details> Box im offenen 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 schließen mehrere <details> Boxen ein, alle mit demselben Namen, sodass nur eine gleichzeitig geöffnet werden 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 Disclosure-Widgets zu öffnen. Wenn Sie eines öffnen, schließen sich alle anderen automatisch.

Nun lassen Sie uns etwas CSS anwenden, um das Erscheinungsbild der Disclosure-Box zu ändern.

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, das einer Registerkartenoberfläche ähnelt, bei der das Klicken auf die Registerkarte diese öffnet, um ihren Inhalt anzuzeigen.

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

Das Disclosure-Dreieck selbst kann angepasst werden, obwohl dies nicht so umfassend unterstützt wird. Es gibt Variationen in der Unterstützung dieser Anpassung durch Browser aufgrund experimenteller Implementierungen, als das Element standardisiert wurde. Daher müssen wir für eine Weile mehrere Ansätze verwenden.

Das <summary> Element unterstützt die list-style Kurzschreibweise und dessen Langformen wie list-style-type, um das Disclosure-Dreieck nach Wunsch zu ändern (normalerweise mit list-style-image). Zum Beispiel können wir das Piktogramm des Disclosure-Widgets entfernen, indem wir list-style: none setzen.

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;
  list-style: none;
}

details > p {
  border-radius: 0 0 10px 10px;
  background-color: #ddd;
  padding: 2px 6px;
  margin: 0;
  box-shadow: 3px 3px 4px black;
}

Dieses CSS erzeugt ein Aussehen, das einer Registerkartenoberfläche ähnelt, bei der das Aktivieren der Registerkarte diese erweitert öffnet, um ihren 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

• <summary>