【公告】網站目前停止所有的課程訂閱服務,原有學員權益不受影響,造成不便還請見諒,我們正在打造更多課程以及圖書,包含 Python 為主的課程主題,未來將會合併且擴充目前的課程內容,提供全新課程訂閱服務,感謝學員的支持。
【公告】《Entity Framework 實務精要》 絕版優惠學習活動,是針對最後一批少量書籍絕版的短期特別活動,只提供 20 個名額(剩 5 名),教學影片要在今年暑假過後才會重新開放訂閱,並沒有提供之前單獨購書的讀者,還請見諒, 如果您需要教學影片,屆時再請參與,也感謝讀者學員的支持,我們正在開發更多的教學內容,歡迎與我們一起努力。
《Entity Framework 實務精要》 絕版優惠學習活動》

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 屬性,則隱藏的內容會被展開。


沒有留言: