<details> HTML-Details-Widrigelement

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 sich in einem von zwei Zuständen befinden. Der Standardzustand geschlossen zeigt nur das Dreieck und das Label innerhalb von <summary> an (oder eine vom User-Agenten definierte Standardzeichenkette, wenn kein <summary> vorhanden ist).

Wenn der Benutzer auf das Widget klickt oder es fokussiert und dann die Leertaste drückt, öffnet es sich "drehend" und offenbart seinen Inhalt. Der übliche Gebrauch eines Dreiecks, das sich dreht oder wendet, 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 Widrigkeitswidget 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 eingebaute Möglichkeit, den Übergang zwischen offen und geschlossen zu animieren.

Im geschlossenen Zustand zeigt das Widget standardmäßig nur das Offenlegungsdreieck und die Zusammenfassung an. Im geöffneten 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 dieses oder das ::marker-Pseudo-Element verwenden, um das Widrigkeitswidget anzupassen.

Attribute

Dieses Element beinhaltet 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 ist dieses Attribut nicht vorhanden, 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 Boolean ist.

name

Dieses Attribut ermöglicht es, mehrere <details>-Elemente zu verbinden, wobei jeweils nur eines geöffnet sein kann. Dies ermöglicht es Entwicklern, UI-Funktionen wie Akkordeons ohne Scripting einfach zu erstellen.

Das name-Attribut spezifiziert einen Gruppennamen - 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 Elements führt dazu, dass ein anderes geschlossen wird. 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 Quellcode stehen, um Teil derselben Gruppe zu sein.

Ereignisse

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, wann immer sich dessen Zustand zwischen geöffnet und geschlossen ändert. Es wird nachher gesendet, nachdem sich der Zustand geändert hat, 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 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 Offenlegungselement

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 Offenlegungsbox

Um die <details>-Box im offenen Zustand zu starten, fügen Sie das Boolean-Attribut open 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 Offenlegungsboxen

Wir schließen mehrere <details>-Boxen ein, alle mit demselben Namen, sodass 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 Widrigkeitswidgets zu öffnen. Wenn Sie eines öffnen, schließen sich alle anderen automatisch.

Anpassen des Erscheinungsbildes

Nun lassen Sie uns etwas CSS anwenden, um das Erscheinungsbild der Offenlegungsbox anzupassen.

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, das einer Registerkarten-Oberfläche ähnelt, 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 Seite des <summary>-Elements für ein Beispiel zur Anpassung des Widrigkeitswidgets an.

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

• <summary>
• ::details-content