Question

detail元素在语义上是否适合标记手风琴？

示例：

<div class="accordion">

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

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

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

</div>

我问这个问题，因为规范对其用法并不十分清楚。它只是声明details元素是一个公开小部件。我当然不想将这个元素用于它本身并不存在的东西。

修改

这样的事情会更适合语义吗？

<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>

谢谢！

Answer 1

是的，<details><summary>元素完全适用于您所描述的内容（ 和最具语义选项 ）：

来自http://www.w3.org/html/wg/drafts/html/master/interactive-elements.html#the-details-element：

详细信息元素表示公开 小部件 用户可以 获取其他信息 或控件。 [强调我的]

这是来自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 Reset可能是有序的，但没有语义上的理由不对手风琴使用这些有用和适当的元素。

**请注意： ~~Chrome目前是唯一支持切换功能的浏览器，我认为该规范适用于这些元素。~~ Javascript fallback在这里很有用。

**编辑3/2017 - 有关支持表，请参阅http://caniuse.com/#feat=details。几乎所有IE和Edge都支持此功能。

Answer 2

请勿使用<details>，否则您会遇到此问题：

Insane Chrome issue...Chrome renders twisties?

这可能不适合您手风琴的行为。

手风琴的HTML5细节元素

2 个答案: