手风琴的 HTML5 细节元素

Question

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

例子：

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

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 Reset 可能是合适的，但没有语义上的理由不将这些有用且适当的元素用于手风琴。

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

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

Answer 2

不要为此使用<details>，否则你会遇到这个问题：

Insane Chrome issue...Chrome renders twisties?

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

Answer 3

好问题。我正在寻找那个，甚至看到 MDN 使用<details> 作为他们的侧边栏链接菜单。 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details

但是，有两个问题：

<details> 不可动画

无论是否打开，都无法为过渡设置动画 - 因为没有过渡。

来自 MDN 文档：

很遗憾，目前还没有内置的方法来为 打开和关闭之间的过渡。

不支持 IE

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