2

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>

谢谢！

4

3 回答 3

3

Yes, <details><summary> elements are entirely appropriate (and the most semantic option) for what you're describing:

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

The details element represents a disclosure widget from which the user can obtain additional information or controls. [emphasis mine]

And this is from http://html5doctor.com/the-details-and-summary-elements/:

Essentially, we can use to create an accordion-like widget that the user can toggle open and closed. Inside , we can put any sort of content we want.

Perfect usage. For example, my company has a contact page with many contact options so we could setup an accordion for it like so:

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

A note on styling: good semantics shouldn't be thrown overboard to address browser-specific styling issues. A CSS Reset may be in order, but there's no semantic reason not to use these helpful and appropriate elements for an accordion.

**Do note: Chrome currently is the only browser that supports the toggling functionality that I believe the spec intended for these elements. A Javascript fallback would be useful here.

**Edit 3/2017 - See http://caniuse.com/#feat=details for support tables. This feature is now supported by almost all but IE and Edge.

于 2013-04-04T15:45:27.960 回答
0

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

疯狂的 Chrome 问题...... Chrome 呈现扭曲？

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

于 2011-07-03T15:39:06.193 回答
0

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

但是，有两个问题：

<details>不可动画

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

来自 MDN 文档：

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

不支持IE

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

于 2021-10-03T12:03:56.287 回答