<details>: Das Details-Disclosure-Element

Probieren Sie es aus

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

details {
  border: 1px solid #aaaaaa;
  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 #aaaaaa;
  margin-bottom: 0.5em;
}

Ein <details>-Widget kann einen von zwei Zuständen haben. Der Standardzustand geschlossen zeigt nur das Dreieck und die Beschriftung innerhalb <summary> an (oder eine benutzeragenten-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 zeigt seinen Inhalt. Die übliche Verwendung eines Dreiecks, das dreht oder verdreht wird, 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 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 geöffnetem und geschlossenem Zustand zu animieren.

Standardmäßig ist das Widget im geschlossenen Zustand nur so hoch, dass es das Verdreieckungssymbol und die Zusammenfassung anzeigt. Wenn es geöffnet ist, erweitert es sich, um die 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-Pseudo-Element verwenden, um das Disclosure-Widget anzupassen.

Attribute

Dieses Element enthält die globalen Attribute.

open

Dieses Boolesche Attribut zeigt an, ob die Details – das heißt, die Inhalte des <details>-Elements – derzeit sichtbar sind. Die Details werden angezeigt, wenn dieses Attribut vorhanden ist, 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 zu verbergen. open="false" macht die Details sichtbar, da dieses Attribut ein boolesches 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-Funktionen wie Akkordeons ohne Skripte 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 wird ein anderes schließen. Wenn mehreren gruppierten <details>-Elementen das open-Attribut gegeben wird, wird nur das erste im Quellcode geöffnete dargestellt.

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

Ereignisse

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, wenn sich sein Zustand zwischen offen und geschlossen ändert. Es wird nach der Änderung des Zustands gesendet, obwohl, wenn der Zustand mehrmals geändert wird, 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 */
  }
});

Beispiele

Ein einfaches Disclosure-Beispiel

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

Erstellen einer offenen Disclosure-Box

Um die <details>-Box im geöffneten 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

Mehrere benannte Disclosure-Boxen

Wir fügen mehrere <details>-Boxen ein, alle mit demselben Namen, damit nur eine gleichzeitig geöffnet sein 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 Disclosure-Widgets zu öffnen. Wenn Sie eines öffnen, schließen sich alle anderen automatisch.

Anpassen des Aussehens

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: #dddddd;
  border: none;
  box-shadow: 3px 3px 4px black;
  cursor: pointer;
}

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

details:open > summary {
  background-color: #ccccff;
}

Dieses CSS erzeugt ein Aussehen ähnlich einer Registerkartenschnittstelle, bei der das Klicken auf die Registerkarte diese ö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

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

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

• <summary>
• ::details-content