Behebung des Detailelements

Das HTML5 <details></details> -Element bietet eine prägnante Möglichkeit, zusammenklappbare Inhalte zu erstellen. Es ist jedoch eine bedeutende Usability -Herausforderung: Hash -Verbindungen, die Inhalte innerhalb eines zusammengebrochenen Abschnitts abzielen, enthüllt diesen Inhalt nicht. Dieser Artikel beschreibt eine progressiv verbesserte JavaScript -Lösung, einschließlich einer zugänglichen Polyfill für Browser, deren native Unterstützung fehlt, um dieses Problem zu lösen. <details></details>

Key Takeaways:

Das
1. -Element, obwohl sie nützlich ist, aber unter einem Usability -Problem mit Hash -Links auf versteckten Inhalt leidet. <details></details>
Ein Polyfill emuliert die
2. -Funktionalität für nicht unterstützte Browser. <details></details>
Die Wirksamkeit der Polyfill wird beeinträchtigt, wenn ein Hash -Verbindungsverbindungsverbindungs ​​in einem zusammengebrochenen Bereich auf ein Element zeigt. Die Seite bleibt oben und verdeckt das Ziel.
Eine rekursive Funktion befasst
4. <details></details>
Einführung

<details></details> Das mit dem -Element gepaarte

-Element erstellt zusammenklappbaren Inhalt. Das

(falls vorhanden) muss das erste oder letzte Kind sein; Alle anderen Inhalte sind zusammenklappbar. Das <details></details> -attribut erzwingt, dass der Inhalt zunächst sichtbar ist. Derzeit unterstützt nur Chrome <summary></summary> vollständig. Das folgende Bild zeigt das Rendering von Chrom: <summary></summary> open <details></details>

Erstellen eines Polyfills

Ein grundlegender Polyfill erfasst native Unterstützung über die Eigenschaft . Native Implementierungen erfordern keine manuellen

-attributaktualisierungen, die ARIA -Attribute müssen jedoch noch Management benötigen. Eine typische Struktur sieht so aus:

open open Das Skript verwaltet das Attribut

und verwendet es als CSS -Selektor für das visuelle Zusammenbruch:

<code class="language-html"><details open="open">
  <summary>This is the summary element</summary>
  <div>This is the expanding content</div>
</details></code>

aria-expanded A Praping

vereinfacht das Verwalten von

<code class="language-css">details > div[aria-expanded="false"] {
  display: none;
}</code>

und

Eigenschaften, insbesondere für ältere Browser wie IE7, die zusätzliche Style -Handhabung erforderten. Die Funktion <div> überlastet Browser -Inkonsistenzen in der Tastatur Klicken Sie auf Ereignisereignis: <code>aria-expanded display addClickEvent Das Hash -Problem hervorhebt

<code class="language-javascript">function addClickEvent(node, callback) {
  // ... (function body as in original article) ...
}</code>

Das Kernproblem entsteht, wenn ein Hash-Link (beispielsweise#First-Content) auf ein Element in einem zusammengebrochenen -Region abzielt. Die Seite scrollt nicht zum Ziel. Es bleibt oben und lässt das Ziel versteckt.

<details></details> Behebung des Hash -Problems

Die rekursive -Funktion löst dies:

<code class="language-html"><details open="open">
  <summary>This is the summary element</summary>
  <div>This is the expanding content</div>
</details></code>

Diese Funktion erweitert rekursiv alle Vorfahren <details></details> Elemente, die das Ziel enthalten. Es wird auf Seite geladen für location.hash und auf internen Linkklicks. Um eine zuverlässige Scrollen zu gewährleisten, wird window.scrollBy nach der Erweiterung verwendet und das Ziel im Ansichtsfenster positioniert. Das Originalverhalten (kein automatisches Scrollen auf der Seite aktualisiert) wird beibehalten. location.hash

Schlussfolgerung

Diese verbesserte Lösung, die als "Omnifill" bezeichnet wird, geht über das grundlegende Polyfilling hinaus. Es verbessert die Benutzerfreundlichkeit und Zugänglichkeit für alle Browser und befasst sich mit inhärenten Einschränkungen des

-Elements. <details></details>

häufig gestellte Fragen (FAQs) zum HTML -Detailelement

(Der FAQS -Abschnitt aus der ursprünglichen Eingabe bleibt unverändert.)