details/summary 這兩組元素標籤必須一起使用的,語法如下:
details 支援特定內容的動態隱藏效果, summary 則作為標示 details 內容的標題,點擊標題則會展開 details 的內容,如果想要直接顯示 details 的隱藏內容,則設定其 open 屬性即可。以下是兩段利用 details/summary 設定的配置,點選可以展開其內容:
康廷數位出版了一系列 HTML5 圖書 … 擺脫 App 發展模式的制肘 !
以下為相關配置的內容:
兩組 details 元素,各配置一組 summary 元素。
如果在 details 同時設定了 open 屬性,則隱藏的內容會被展開。
<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 屬性,則隱藏的內容會被展開。
沒有留言:
張貼留言