詳細要素の修正

html5<details></details>要素は、折りたたみ可能なコンテンツを作成するための簡潔な方法を提供しますが、それは重要な使いやすさの課題を提示します。この記事では、この問題を解決するために、ネイティブサポートを欠いているブラウザ用のアクセス可能なポリフィルなど、徐々に強化されたJavaScriptソリューションについて詳しく説明しています。 <details></details>

キーテイクアウト：

要素は、有用ではありますが、非表示のコンテンツをターゲットとするハッシュリンクの使いやすさの問題に苦しんでいます。
1. PolyFillは、サポートされていないブラウザの<details></details>機能を効果的にエミュレートします
ハッシュリンクが崩壊した領域内の要素を指すと、ポリフィルの有効性が損なわれます。 ページは上部に残り、ターゲットを不明瞭にします。
2. <details></details>再帰関数は、関連する要素を自動的に拡張することによりこれに対処します。
4. <details></details>
を紹介します

要素と要素と組み合わせて、折りたたみ可能なコンテンツを作成します。 <details></details>（存在する場合）は、最初または最後の子供でなければなりません。他のすべてのコンテンツは折りたたみ可能です。 属性は、コンテンツを最初に見えるようにします。 現在、Chromeのみが

を完全にサポートしています。 次の画像は、Chromeのレンダリングを示しています

<details></details><summary></summary> <summary></summary>openポリフィルの作成

基本的なポリフィルは、

プロパティを介してネイティブサポートを検出します。 ネイティブの実装では、マニュアル

属性の更新は必要ありませんが、ARIA属性には依然として管理が必要です。 典型的な構造は次のようになります：

スクリプトは属性を管理し、視覚的崩壊のためのCSSセレクターとして使用します：

ラッピングは、特に追加のスタイル処理が必要なIE7のような古いブラウザの場合、

プロパティとopenプロパティの管理を簡素化します。 open関数は、キーボードクリックイベントの発火のブラウザの不一致を処理します：

<details open="open">
  <summary>This is the summary element</summary>
  <div>This is the expanding content</div>
</details>

ハッシュの問題を強調する

aria-expanded

コアの問題は、ハッシュリンク（たとえば＃第1コンテンツなど）が崩壊した

details > div[aria-expanded="false"] {
  display: none;
}

領域内の要素をターゲットにするときに発生します。ページはターゲットにスクロールしません。ターゲットを隠したままにしておきます。

<div> <code>aria-expandedハッシュの問題の修正displayaddClickEvent 再帰的

function addClickEvent(node, callback) {
  // ... (function body as in original article) ...
}

関数はこれを解決します：

<details open="open">
  <summary>This is the summary element</summary>
  <div>This is the expanding content</div>
</details>

この関数は、ターゲットを含む祖先<details></details>要素を再帰的に拡張します。 location.hashおよび内部リンクのクリックのページロードで呼び出されます。 信頼性の高いスクロールを確保するために、拡張後にwindow.scrollByが使用され、ターゲットがビューポート内に配置されます。 オリジナルのlocation.hash動作（ページの更新に自動スクロールなし）が維持されます。

結論

「全知」と呼ばれるこの拡張されたソリューションは、基本的なポリフィルフィルを超えて拡張されています。すべてのブラウザの使いやすさとアクセシビリティを向上させ、<details></details>要素の固有の制限に対処します。 HTMLの詳細要素に関するよくある質問（FAQ）

（元の入力からのFAQSセクションは変更されていません。）