檢視 HTML5新功能的原始碼

[[分類:HTML]]
==details,summary==
收納
===一、基本用法===
<pre>&lt;details&gt;
    &lt;summary&gt;標題&lt;/summary&gt;
    &lt;p&gt;內容，可以使用標籤(&lt;…&gt;)。&lt;/p&gt;
&lt;/details&gt;</pre>
<ol>
<li>只會顯示了 &lt;summary&gt; 標籤中的內容，其他都預設隱藏了；</li>
<li>&lt;summary&gt; 標籤前面出現了一個小三角，尖端向右；</li>
<li>點擊一下小三角，尖端變成向下，原本隱藏的內容顯示出來了；</li>
<li>再一次點擊，內容又會隱藏收起，箭頭方向還原。
</ol>

====(一)open====
<pre>&lt;details open&gt;
    &lt;summary&gt;這是摘要2&lt;/summary&gt;
    這裡&lt;details&gt;標籤設置了HTML布爾屬性open，因此，預設是展開狀態。
&lt;/details&gt;</pre>
====(二)省略&lt;summary&gt;====
如果省略&lt;summary&gt;標籤，則&lt;details&gt;元素會在內部自動創建一個&lt;summary&gt;內容，預設的文案是「詳細信息」。

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

參考資料
#[https://www.zhangxinxu.com/wordpress/2018/01/html5-details-summary-no-js-ux/ 借助 HTML5 details,summary 實現各種交互效果]