<details>: Das Details-Disclosure-Element - HTML

Experiment: Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.

`Erstellen eines offenen Disclosure-Feldes`

Um das

-Feld im offenen Zustand zu starten, fügen Sie das boolesche open-Attribut hinzu: html System Requirements 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. Ergebnis

`Mehrere benannte Disclosure-Felder`

Wir fügen mehrere

-Elemente ein, alle mit demselben Namen, sodass immer nur eines geöffnet sein kann: html Graduation Requirements Requires 40 credits, including a passing grade in health, geography, history, economics, and wood shop. System Requirements 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. Job Requirements Requires knowledge of HTML, CSS, JavaScript, accessibility, web performance, privacy, security, and internationalization, as well as a dislike of broccoli. Ergebnis Versuchen Sie, alle Disclosure-Widgets zu öffnen. Wenn Sie eines öffnen, schließen sich automatisch alle anderen.

`Anpassen des Erscheinungsbildes`

Nun wollen wir einige CSS anwenden, um das Erscheinungsbild des Disclosure-Feldes anzupassen.

CSS 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 durch Klicken auf die Registerkarte deren Inhalt geöffnet wird. Hinweis: In Browsern, die die :open-Pseudo-Klasse nicht unterstützen, können Sie den Attributselektor details[open] verwenden, um das -Element im offenen Zustand zu gestalten. HTML html System Requirements 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. Ergebnis Siehe die -Seite für ein Beispiel zum Anpassen des Disclosure-Widgets.

`Technische Zusammenfassung`

Inhaltskategorien	Fließender Inhalt, Abschnitts-Wurzel, interaktiver Inhalt, greifbarer Inhalt.
Erlaubter Inhalt	Ein -Element gefolgt von fließendem Inhalt.
Tag-Auslassung	Keine, sowohl der Start- als auch der End-Tag sind obligatorisch.
Erlaubte Eltern	Jedes Element, das fließenden Inhalt akzeptiert.
Implizite ARIA-Rolle	`group`
Erlaubte ARIA-Rollen	Keine `role` erlaubt
DOM-Schnittstelle	[`HTMLDetailsElement`](/de/docs/Web/API/HTMLDetailsElement)

`Spezifikationen`

Specification
HTML # the-details-element

`Browser-Kompatibilität`

Siehe auch ::details-content MDN-Feedback-Box War diese Übersetzung hilfreich? Diese Seite wurde automatisch aus dem Englischen übersetzt. Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden