手风琴的 HTML5 详细信息元素

Question

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

示例：

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

谢谢！

Answer 1

是的，

元素完全适合您所描述的内容（和最语义化的选项）：

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

详细信息元素代表一个披露小部件，从中
用户可以获取附加信息或控件。 [强调我的]

这是来自 http://html5doctor.com/the-details -和摘要元素/：

本质上，我们可以用来创建一个类似手风琴的小部件，用户可以打开和关闭它。在里面，我们可以放置任何我们想要的内容。

完美使用。例如，我的公司有一个包含许多联系选项的联系页面，因此我们可以为其设置一个手风琴，如下所示：

<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 后备在这里会很有用。

**编辑 3/2017 - 请参阅 http://caniuse.com/#feat=details 了解支持表。现在除了 IE 和 Edge 之外，几乎所有浏览器都支持此功能。

Answer 2

不要为此使用

，否则您会遇到此问题：

疯狂的 Chrome 问题...Chrome 渲染扭曲？

这可能不是您的手风琴所需的行为。

Answer 3

好问题。我正在寻找它，发现甚至 MDN 也在使用

作为其侧边栏链接菜单。 https://developer.mozilla.org/en-US/ docs/Web/HTML/Element/details

但是，有两个问题：

不可动画

由于它要么打开，要么不打开，所以没有办法为过渡设置动画 - 因为没有过渡。

来自 MDN 文档：

不幸的是，目前还没有内置的方法来设置动画
开放和封闭之间的过渡。

不支持 IE

如果您关心的话，Internet Explorer 不支持它:)