logo标签列表

HTML5细节元素用于手风琴效果

htmlaccordionsemanticshtml-tag-details
3
细节元素是否适合标记手风琴？例如：
<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>

谢谢！

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>创建类似手风琴的小部件，用户可以打开和关闭。在<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 回退会很有用。

**编辑于2017年3月 - 请参见http://caniuse.com/#feat=details以获取支持表。几乎所有浏览器都支持此功能，除了IE和Edge。

0
1
问题已解决：https://dev59.com/9m025IYBdhLWcg3wIyOf - DADU
没问题，感谢您成为第一个回答这个问题的人！ - DADU
0

不错的问题。我正在寻找这个，并且甚至看到MDN在其侧边栏链接菜单中使用<details>。https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details

然而，有两个问题：

<details>无法动画化

由于它要么是打开的，要么是关闭的，因此没有办法对过渡进行动画处理-因为没有过渡。

来自MDN文档：

不幸的是，目前没有内置的方法可以在打开和关闭之间进行动画过渡。

不支持IE

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接