手风琴的HTML5细节元素

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>

第一节
第二节
第三节

谢谢

不要为此使用

，否则会出现以下问题：

这可能不是您想要的手风琴行为。

是的，

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

发件人：

details元素表示一个disclosure小部件，其中 用户可以获取附加信息或控件。[我的重点]

这是来自：

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

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

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

通讯地址
美国信函：123 Main St.，Washington，DC 00000-0000

国际通信：华盛顿特区1111号邮政信箱00000-1111

电话号码
美国：800-555-5555

国际：+1-800-555-5556

关于样式的一个注意事项：好的语义不应该被用来解决特定于浏览器的样式问题。A可能是正确的，但没有语义上的理由不在手风琴中使用这些有用且合适的元素

**注意：Chrome是目前唯一一款支持切换功能的浏览器，我相信这是该规范为这些元素设计的。Javascript在这里很有用

---

**编辑2017年3月-有关支持表，请参阅。除IE和Edge外，几乎所有产品都支持此功能。

问题解决了：没问题，感谢您第一个回答此问题！