HTML5新功能

details,summary

收納

一、基本用法

<details>
    <summary>標題</summary>
    <p>內容，可以使用標籤(<…>)。</p>
</details>

1. 只會顯示了 <summary> 標籤中的內容，其他都預設隱藏了；
2. <summary> 標籤前面出現了一個小三角，尖端向右；
3. 點擊一下小三角，尖端變成向下，原本隱藏的內容顯示出來了；
4. 再一次點擊，內容又會隱藏收起，箭頭方向還原。

(一)open

<details open>
    <summary>這是摘要2</summary>
    這裡<details>標籤設置了HTML布爾屬性open，因此，預設是展開狀態。
</details>

(二)省略<summary>

如果省略<summary>標籤，則<details>元素會在內部自動創建一個<summary>內容，預設的文案是「詳細信息」。

二、進階用法

1. 自定義 details 在瀏覽器內的 UI
2. 處理 Chrome 瀏覽器下點擊時 outline 輪廓等體驗
3. details 元素行為的各種交互效果
   • 「更多」展開與收起效果
   • 點擊顯示懸浮菜單，自定義下拉框等效果
   • 多項折疊效果
   • 帶 slideUp / slideDown 效果的多項折疊菜單
   • 多級嵌套的樹形菜單

參考資料

1. 借助 HTML5 details,summary 實現各種交互效果