2

詳細要素は、アコーディオンをマークアップするのに意味的に適切ですか?

例：

<div class="accordion">

<details open>
<summary>Section 1</summary>
</details>

<details>
<summary>Section 2</summary>
</details>

<details>
<summary>Section 3</summary>
</details>

</div>

仕様がその使用法についてあまり明確ではないため、この質問をします。詳細要素が開示ウィジェットであることを示しているだけです。私は確かに、意図されていないものに要素を使用したくありません。

編集

このようなものは意味的により適していますか?

<article role="tablist">

<header role="tab" aria-expanded>Section 1</header>
<div role="tabpanel">
</div>

<header role="tab">Section 2</header>
<div role="tabpanel">
</div>

<header role="tab">Section 3</header>
<div role="tabpanel">
</div>

</article>

ありがとう！

4

3 に答える 3

3

はい、<details><summary>要素は、あなたが説明しているものに完全に適しています（そして最も意味のあるオプションです）：

http://www.w3.org/html/wg/drafts/html/master/interactive-elements.html#the-details-elementから:

details 要素は、ユーザーが追加情報またはコントロールを取得できる開示ウィジェットを表します。[鉱山を強調]

これはhttp://html5doctor.com/the-details-and-summary-elements/からのものです。

基本的に、ユーザーが開いたり閉じたりできるアコーディオンのようなウィジェットを作成するために使用できます。内部には、必要なあらゆる種類のコンテンツを配置できます。

完璧な使用法。たとえば、私の会社には多くの連絡先オプションを備えた連絡先ページがあるため、次のようにアコーディオンを設定できます。

<details>
    <summary>Mailing Address</summary>
    <p><strong>U.S. Correspondence:</strong> 123 Main St., Washington, DC 00000-0000</p>
    <p><strong>International Correspondence:</strong> P.O.Box 1111, Washington, DC 00000-1111</p>
</details>
<details>
    <summary>Phone Numbers</summary>
    <p><strong>U.S.:</strong> 800-555-5555</p>
    <p><strong>Int'l:</strong> +1-800-555-5556</p>
</details>

スタイリングに関する注意: ブラウザー固有のスタイリングの問題に対処するために、適切なセマンティクスを過剰に使用するべきではありません。CSSのリセットは必要かもしれませんが、これらの便利で適切な要素をアコーディオンに使用しない意味論上の理由はありません。

**注意してください:Chrome は現在、仕様がこれらの要素を対象としていると思われるトグル機能をサポートする唯一のブラウザーです。ここでは、 Javascriptフォールバックが役立ちます。

**2017 年 3 月の編集 -サポート テーブルについては、 http: //caniuse.com/#feat=details を参照してください。この機能は現在、IE と Edge を除くほぼすべてでサポートされています。

于 2013-04-04T15:45:27.960 に答える
0

これには使用しないでください。使用する<details>と、次の問題が発生します。

非常識なChromeの問題...Chromeはツイスティをレンダリングしますか？

それはおそらくあなたのアコーディオンにとって望ましくない振る舞いです。

于 2011-07-03T15:39:06.193 に答える
0

良い質問です。私はそれを探していて、MDN でさえ<details>リンクのサイドバー メニューに使用しているのを見ました。https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details

ただし、次の 2 つの問題があります。

<details>アニメーション化できません

開いているかどうかに関係なく、遷移をアニメーション化する方法はありません。遷移がないためです。

MDN ドキュメントから:

残念ながら、現時点では、オープンとクローズの間の遷移をアニメーション化する組み込みの方法はありません。

IE のサポートなし

気になる場合は、Internet Explorer ではサポートされていません :)

于 2021-10-03T12:03:56.287 に答える