HTML <details> 標簽

定義和用法

<details> 標簽規定用戶可以根據需要打開和關閉的其他詳細信息。

<details> 標簽通常用于創建用戶可以打開和關閉的交互式小部件。默認情況下，小部件是關閉的。打開時，它會展開并顯示其中的內容。

任何類型的內容都可以放在 <details> 標簽中。

提示：<summary> 標簽 與 <details> 結合使用，可為詳細信息指定可見的標題。用戶點擊標題時，會顯示出 <details> 定義的內容。

另請參閱：

HTML DOM 參考手冊：Details 對象

實例

例子 1

定義用戶可以按需打開和關閉的詳細信息：

<details>
  <summary>未來世界中心（Epcot Center）</summary>
  <p>Epcot 是華特迪士尼世界度假區的主題公園，擁有令人興奮的景點、國際展館、屢獲殊榮的煙花和季節性活動。</p>
</details>

親自試一試

例子 2

使用 CSS 設置 <details> 和 <summary> 的樣式：

<html>
<style>
details > summary {
  padding: 4px;
  width: 200px;
  background-color: #eeeeee;
  border: none;
  box-shadow: 1px 1px 2px #bbbbbb;
  cursor: pointer;
}
details > p {
  background-color: #eeeeee;
  padding: 4px;
  margin: 0;
  box-shadow: 1px 1px 2px #bbbbbb;
}
</style>
<body>
<details>
  <summary>未來世界中心（Epcot Center）</summary>
  <p>Epcot 是華特迪士尼世界度假區的主題公園，擁有令人興奮的景點、國際展館、屢獲殊榮的煙花和季節性活動。</p>
</details>
</body>
</html>

親自試一試

屬性

屬性 值 描述
open open 規定詳細信息應該對用戶可見（打開）。

全局屬性

<details> 標簽還支持 HTML 中的全局屬性。

事件屬性

<details> 標簽還支持 HTML 中的事件屬性。

默認的 CSS 設置

大多數瀏覽器將使用以下默認值顯示 <details> 元素：

details {
  display: block;
}

瀏覽器支持

表中的數字注明了首個完全支持該元素的瀏覽器版本。

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
12.0 79.0 49.0 6.0 15.0