<details>: 細節披露元素

基線廣泛可用

此功能已完善，可在多種裝置和瀏覽器版本上執行。它自 2020 年 1 月.

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

披露小部件通常在螢幕上使用一個小三角形來表示，該三角形會旋轉（或扭曲）以指示開啟/關閉狀態，旁邊有一個標籤。<summary> 元素的內容用作披露小部件的標籤。<details> 的內容提供了 <summary> 的無障礙描述。

試一試

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

當用戶點選小部件或聚焦它然後按下空格鍵時，它會“旋轉”開啟，顯示其內容。三角形旋轉或扭曲以表示開啟或關閉小部件的常用方式是為什麼這些有時被稱為“扭轉”。

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

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

完全符合標準的實現會自動將 CSS display: list-item 應用於 <summary> 元素。您可以使用它來進一步自定義其外觀。有關更多詳細資訊，請參閱自定義披露小部件。

屬性

此元素包含全域性屬性。

open

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

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

name

此屬性使多個 <details> 元素能夠連線，並且一次只能開啟一個。這允許開發人員輕鬆地建立 UI 功能（例如手風琴），而無需指令碼。

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

注意：<details> 元素不必在原始碼中彼此相鄰才能屬於同一個組。

事件

除了 HTML 元素支援的常用事件之外，<details> 元素還支援 toggle 事件，該事件在小部件狀態在開啟和關閉之間切換時，會分派到 <details> 元素。它在狀態更改之後傳送，但如果狀態在瀏覽器能夠分派事件之前多次更改，則事件將合併，因此只發送一個事件。

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

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="reqs">
  <summary>Graduation Requirements</summary>
  <p>
    Requires 40 credits, including a passing grade in health, geography,
    history, economics, and wood shop.
  </p>
</details>
<details name="reqs">
  <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="reqs">
  <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: #ddd;
  border: none;
  box-shadow: 3px 3px 4px black;
  cursor: pointer;
}

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

details[open] > summary {
  background-color: #ccf;
}

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

選擇器details[open]可用於設定開啟元素的樣式。

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>元素支援list-style速記屬性及其完整屬性，例如list-style-type，將披露三角形更改為任何你選擇的內容（通常使用list-style-image）。例如，我們可以透過設定list-style: none來刪除披露小部件圖示。

CSS

css

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

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

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

此 CSS 建立了一個類似於選項卡介面的外觀，啟用選項卡會展開並開啟它以顯示其內容。

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>`元素，後面跟著流內容。
標籤省略	沒有，開始和結束標籤都是強制性的。
允許父級	任何接受流內容的元素。
隱式 ARIA 角色	`group`
允許 ARIA 角色	不允許`role`
DOM 介面	`HTMLDetailsElement`

規範

規範
HTML 標準 # the-details-element

瀏覽器相容性

BCD 表格僅在瀏覽器中載入

另請參閱

<summary>