1. Web
  2. HTML
  3. 參考
  4. 元素
  5. <details>

<details>：詳情披露元素

Baseline 廣泛可用 *

此特性已相當成熟，可在許多裝置和瀏覽器版本上使用。自 ⁨2020 年 1 月⁩ 起，所有主流瀏覽器均已支援。

* 此特性的某些部分可能存在不同級別的支援。

<details> HTML 元素建立一個詳情披露小部件，其中的資訊僅在該小部件切換到開啟狀態時才可見。必須使用 <summary> 元素提供摘要或標籤。

詳情披露小部件通常在螢幕上以一個小三角形呈現，該三角形旋轉（或扭轉）以指示開啟/關閉狀態，旁邊有一個標籤。<summary> 元素的內容用作詳情披露小部件的標籤。<details> 的內容為 <summary> 提供可訪問描述。

試一試

<details>
  <summary>Details</summary>
  Something small enough to escape casual notice.
</details>

details {
  border: 1px solid #aaaaaa;
  border-radius: 4px;
  padding: 0.5em 0.5em 0;
}

summary {
  font-weight: bold;
  margin: -0.5em -0.5em 0;
  padding: 0.5em;
}

details[open] {
  padding: 0.5em;
}

details[open] summary {
  border-bottom: 1px solid #aaaaaa;
  margin-bottom: 0.5em;
}

<details> 小部件可以處於兩種狀態之一。預設的關閉狀態只顯示三角形和 <summary> 中的標籤（如果沒有 <summary>，則顯示使用者代理定義的預設字串）。

當用戶單擊小部件或將其聚焦然後按下空格鍵時，它會“扭轉”開啟，顯示其內容。通常使用旋轉或扭轉的三角形來表示開啟或關閉小部件，這就是為什麼它們有時被稱為“扭轉器”的原因。

你可以使用 CSS 為詳情披露小部件設定樣式，並且可以透過設定/刪除其 open 屬性來以程式設計方式開啟和關閉小部件。不幸的是，目前沒有內建的方法來動畫化開啟和關閉之間的過渡。

預設情況下，當關閉時，小部件的高度僅足以顯示詳情披露三角形和摘要。當開啟時，它會展開以顯示其中包含的詳細資訊。

完全符合標準的實現會自動將 CSS display: list-item 應用於 <summary> 元素。你可以使用此或 ::marker 偽元素來自定義詳情披露小部件。

屬性

此元素包含全域性屬性。

open

此布林屬性指示詳細資訊（即 <details> 元素的內容）當前是否可見。當此屬性存在時，詳細資訊可見；當此屬性不存在時，詳細資訊隱藏。預設情況下，此屬性不存在，這意味著詳細資訊不可見。

注意：你必須完全刪除此屬性才能隱藏詳細資訊。open="false" 會使詳細資訊可見，因為此屬性是布林值。

name

此屬性允許連線多個 <details> 元素，一次只打開一個。這使得開發人員無需指令碼即可輕鬆建立手風琴等 UI 功能。

name 屬性指定一個組名稱——給多個 <details> 元素相同的 name 值以將它們分組。同一組中只能有一個 <details> 元素可以開啟——開啟一個會導致另一個關閉。如果多個分組的 <details> 元素被賦予 open 屬性，則只有原始碼順序中的第一個元素將被渲染為開啟狀態。

注意： <details> 元素不必在原始碼中彼此相鄰才能成為同一組的一部分。

事件

除了 HTML 元素支援的常規事件外，<details> 元素還支援 toggle 事件，每當其狀態在開啟和關閉之間切換時，此事件就會分派給 <details> 元素。它在狀態更改之後傳送，但是如果瀏覽器在分派事件之前狀態更改多次，則事件會合並，因此只發送一個。

你可以使用 toggle 事件的事件監聽器來檢測小部件何時更改狀態

js
details.addEventListener("toggle", (event) => {
  if (details.open) {
    /* the element was toggled open */
  } else {
    /* the element was toggled closed */
  }
});

示例

一個基本的詳情披露示例

此示例顯示了一個帶有 <summary> 的基本 <details> 元素。

html
<details>
  <summary>System Requirements</summary>
  <p>
    Requires a computer running an operating system. The computer must have some
    memory and ideally some kind of long-term storage. An input device as well
    as some form of output device is recommended.
  </p>
</details>

結果

建立開放的詳情披露框

要使 <details> 框以其開啟狀態啟動，請添加布爾 open 屬性

html
<details open>
  <summary>System Requirements</summary>
  <p>
    Requires a computer running an operating system. The computer must have some
    memory and ideally some kind of long-term storage. An input device as well
    as some form of output device is recommended.
  </p>
</details>

結果

多個命名詳情披露框

我們包含幾個 <details> 框，它們都具有相同的名稱，因此一次只能開啟一個

html
<details name="requirements">
  <summary>Graduation Requirements</summary>
  <p>
    Requires 40 credits, including a passing grade in health, geography,
    history, economics, and wood shop.
  </p>
</details>
<details name="requirements">
  <summary>System Requirements</summary>
  <p>
    Requires a computer running an operating system. The computer must have some
    memory and ideally some kind of long-term storage. An input device as well
    as some form of output device is recommended.
  </p>
</details>
<details name="requirements">
  <summary>Job Requirements</summary>
  <p>
    Requires knowledge of HTML, CSS, JavaScript, accessibility, web performance,
    privacy, security, and internationalization, as well as a dislike of
    broccoli.
  </p>
</details>

結果

嘗試開啟所有詳情披露小部件。當你開啟一個時，所有其他小部件會自動關閉。

自定義外觀

現在讓我們應用一些 CSS 來自定義詳情披露框的外觀。

CSS

css
details {
  font:
    16px "Open Sans",
    "Calibri",
    sans-serif;
  width: 620px;
}

details > summary {
  padding: 2px 6px;
  width: 15em;
  background-color: #dddddd;
  border: none;
  box-shadow: 3px 3px 4px black;
  cursor: pointer;
}

details > p {
  border-radius: 0 0 10px 10px;
  background-color: #dddddd;
  padding: 2px 6px;
  margin: 0;
  box-shadow: 3px 3px 4px black;
}

details:open > summary {
  background-color: #ccccff;
}

此 CSS 建立了一個類似於選項卡式介面的外觀，單擊選項卡會將其開啟以顯示其內容。

注意：在不支援 :open 偽類的瀏覽器中，你可以使用屬性選擇器 details[open] 在 <details> 元素處於開啟狀態時對其進行樣式設定。

HTML

html
<details>
  <summary>System Requirements</summary>
  <p>
    Requires a computer running an operating system. The computer must have some
    memory and ideally some kind of long-term storage. An input device as well
    as some form of output device is recommended.
  </p>
</details>

結果

請參閱 <summary> 頁面，瞭解自定義詳情披露小部件的示例。

技術摘要

內容類別 流式內容、分段根、互動式內容、可感知內容。
允許內容 一個 <summary> 元素後跟流式內容。
標籤省略 無，起始標籤和結束標籤都必須存在。
允許父級 任何接受流內容的元素。
隱式 ARIA 角色 group
允許的 ARIA 角色 不允許 role
DOM 介面 HTMLDetailsElement

規範

規範
HTML
# the-details-element

瀏覽器相容性

另見

幫助改進 MDN

瞭解如何貢獻

此頁面最後由 MDN 貢獻者於 修改。

在 GitHub 上檢視此頁面 • 報告此內容存在的問題
© . Content available under a Creative Commons license.