6.1 標籤 <details>
HTML5 增加了 <details> 和 <summary> 元素，用於創建互動式的下拉區塊。
這些元素允許用戶展開和折疊內容，提升用戶互動體驗，也節省了網頁空間。
元素 <details> 用於創建可展開或折疊的區塊。在其中可以放置任何 HTML 內容。展開 <details> 時會顯示內嵌內容，而折疊時隱藏內容。
語法：
HTML
<details>
<summary>標題</summary>
<!-- 隱藏的內容 -->
</details>
屬性 open：
如果存在此屬性，<details> 區塊將預設為展開狀態。
<details> 使用範例
HTML
<details open>
<summary>主要信息</summary>
<p>這些信息預設可見，因為設定了 open 屬性。</p>
</details>
解釋
<details>: 創建隱藏內容的容器。<summary>: 定義一個始終可見的標題，點擊以展開或折疊內容。
6.2 標籤 <summary>
元素 <summary> 用於 <details> 內創建標題。此標題始終可見，並作為 <details> 區塊內容的控件。
語法：
HTML
<details>
<summary>標題</summary>
<!-- 隱藏的內容 -->
</details>
使用範例：
HTML
<details>
<summary>更多資訊</summary>
<p>這是隱藏的內容，展開區塊後顯示。</p>
</details>
使用 <details> 和 <summary> 的優勢
- 提升用戶體驗: 用戶可以自行控制想查看的內容。
- 節省空間: 透過互動式標題隱藏大量信息。
- 語義標記: 改善 HTML 文件結構，提高其對用戶和搜索引擎的可訪問性。
6.3 與 JavaScript 的互動
可以使用 JavaScript 輕鬆控制 <details> 和 <summary> 元素，以創建更具互動性的網頁。
JavaScript 使用範例：
HTML
<details>
<summary>更多資訊</summary>
<p>這是隱藏的內容，展開區塊後顯示。</p>
</details>
<details open>
<summary>主要信息</summary>
<p>這些信息預設可見，因為設定了 open 屬性。</p>
</details>
<button id="toggleDetails">收合/展開</button>
JavaScript
// 找到具有 id 'toggleDetails' 的按鈕並添加 'click' 事件處理器
document.getElementById('toggleDetails').addEventListener('click', () => {
// 找到頁面上的所有 'details' 元素
document.querySelectorAll('details').forEach(detail => {
// 反轉每個 'details' 元素的 'open' 屬性值
detail.open = !detail.open;
});
});
解釋：
- “收合/展開”按鈕: 控制頁面上所有
<details>元素的狀態 - click 事件: 切換所有
<details>元素的 open 屬性
GO TO FULL VERSION