手風琴的HTML5細節元素

細節元素在語義上適合用於標記手風琴嗎？手風琴的HTML5細節元素

例子：

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

謝謝！

來源

2011-07-03 DADU

不要使用<details>這一點，否則你就會有這樣的問題：這可能不是期望的行爲對你的手風琴

Insane Chrome issue...Chrome renders twisties?

。

來源

2011-07-03 15:39:06 thirtydot

即刻解決：http://stackoverflow.com/questions/6195329/how-can-you-hide-the-arrow-that-is-displayed-by-default-on-the-html5-details-el – DADU

謝謝，很高興知道。 – thirtydot

沒問題，謝謝你是第一個回答這個問題的人！ – DADU

是，<details><summary>元素是完全合適的（和最語義選項）爲你描述：

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

細節元素代表披露小工具其中用戶可以獲得addi有關信息或控件。 [重點煤礦]

這是從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>

造型上的說明：好的語義不應該被扔到海里，以解決特定瀏覽器的造型的問題。 A CSS Reset可能是有序的，但沒有語義上的原因不使用這些有用和適當的手風琴元素。

**注意： ~~Chrome目前是唯一支持切換功能的瀏覽器，我相信這些規範適用於這些元素。~~ A Javascript fallback會很有用。

**編輯3/2017 - 請參閱http://caniuse.com/#feat=details瞭解支持表。幾乎所有的IE和Edge都支持這個功能。

來源

2013-04-04 15:45:27 philtune

手風琴的HTML5細節元素

回答

相關問題