HTML5 新元素 details/summary

details/summary 這兩組元素標籤必須一起使用的,語法如下:

<details>
<summary>標題</summary>
隱藏內容
</details>

details 支援特定內容的動態隱藏效果, summary 則作為標示 details 內容的標題,點擊標題則會展開 details 的內容,如果想要直接顯示 details 的隱藏內容,則設定其 open 屬性即可。以下是兩段利用 details/summary 設定的配置,點選可以展開其內容:

康廷數位 HTML5 系列圖書
康廷數位出版了一系列 HTML5 圖書 … 擺脫 App 發展模式的制肘 !


HTML5 圖書
  • HTML5 完美風暴
  • HTML5 與 CSS3
  • HTML5 實作範例集
  • HTML5 入門經典


以下為相關配置的內容:

<details>
    <summary>康廷數位 HTML5 系列圖書</summary>
    <p>康廷數位出版了一系列 HTML5 圖書 … 擺脫 App 發展模式的制肘 ! </p>
</details>
<details open>
    <summary>HTML5 圖書</summary>
    <ul>
        <li>HTML5 完美風暴</li>
        <li>HTML5 CSS3</li>
        <li>HTML5 實作範例集</li>
        <li>HTML5 入門經典</li>
   </ul>
</details>

兩組 details 元素,各配置一組 summary 元素。

如果在 details 同時設定了 open 屬性,則隱藏的內容會被展開。


沒有留言: