path: root/files/zh-cn/web/html/element/details/index.html

---
title: <details>：详细信息展现元素
slug: Web/HTML/Element/details
tags:
  - HTML
  - HTML5
  - Web
  - 元素
translation_of: Web/HTML/Element/details
---
<div>{{HTMLRef}}</div>

<p><span class="seoSummary"><strong>HTML <code>&lt;details&gt;</code>元素</strong>可创建一个挂件，仅在被切换成展开状态时，它才会显示内含的信息。</span>{{HTMLElement("summary")}} 元素可为该部件提供概要或者标签。</p>

<p>A disclosure widget is typically presented onscreen using a small triangle which rotates (or twists) to indicate open/closed status, with a label next to the triangle. If the first child of the <code>&lt;details&gt;</code> element is a <code>&lt;summary&gt;</code>, the contents of the <code>&lt;summary&gt;</code> element are used as the label for the disclosure widget.</p>

<div>{{EmbedInteractiveExample("pages/tabbed/details.html", "tabbed-standard")}}</div>



<div class="note">
<p><strong>Note:</strong> The common use of a triangle which rotates or twists around to represent opening or closing the widget is why these are sometimes called "twisties."</p>
</div>

<p>同一个 <code>&lt;details&gt;</code> 组件只能处于两种状态之一。The default <em>closed</em> state displays only the triangle and the label inside <code>&lt;summary&gt;</code> (or a {{Glossary("user agent")}}-defined default string if no <code>&lt;summary&gt;</code>). This might look like the following:</p>

<figure style="margin: 1em 0; padding: 1em; border: 1px solid black; box-shadow: 0 0 4px 1px black; width: 640px;"><img alt="Screenshot of closed &lt;details> widget. A black left-pointing triangle sits to the right of the text “System Requirements”." src="https://mdn.mozillademos.org/files/15717/details-closed.png" style="height: 26px; width: 191px;"></figure>

<p>Here we see a standard disclosure widget with the label "System Requirements", in its default closed state. When the user clicks on the widget, or focuses it then presses the space bar, it "twists" open, revealing its contents:</p>

<figure style="margin: 1em 0; padding: 1em; border: 1px solid black; box-shadow: 0 0 4px 1px black; width: 640px;"><img alt="Screenshot of open &lt;details> widget. The triangle now points downward, and a detailed description of what “System Requirements” means is shown." src="https://mdn.mozillademos.org/files/15718/details-open.png" style="height: 96px; width: 640px;"></figure>

<p>From there, you can use CSS to style the disclosure widget, and you can programmatically open and close the widget by setting/removing its {{htmlattrxref("open", "details")}} attribute.</p>

<p>By default when closed, the widget is only tall enough to display the disclosure triangle and summary. When open, it expands to display the details contained within.</p>

<div class="note">
<p><strong>Note:</strong> Unfortunately, at this time there's no built-in way to animate the transition between open and closed.</p>
</div>

<p>Fully standards-compliant implementations automatically apply the CSS <code>{{cssxref("display")}}: list-item</code> to the {{HTMLElement("summary")}} element. You can use this to customize its appearance further. See {{anch("Customizing the disclosure widget")}} for further details.</p>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Content categories</a></th>
   <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>, sectioning root, interactive content, palpable content.</td>
  </tr>
  <tr>
   <th scope="row">Permitted content</th>
   <td>One {{HTMLElement("summary")}} element followed by <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">flow content</a>.</td>
  </tr>
  <tr>
   <th scope="row">Tag omission</th>
   <td>{{no_tag_omission}}</td>
  </tr>
  <tr>
   <th scope="row">Permitted parents</th>
   <td>Any element that accepts <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">flow content</a>.</td>
  </tr>
  <tr>
   <th scope="row">Permitted ARIA roles</th>
   <td>None</td>
  </tr>
  <tr>
   <th scope="row">DOM interface</th>
   <td>{{domxref("HTMLDetailsElement")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="属性">属性</h2>

<p>此元素仅包含<a href="/zh-CN/docs/Web/HTML/Global_attributes">全局属性</a>。</p>

<dl>
 <dt>{{htmlattrdef("open")}}</dt>
 <dd>This Boolean attribute indicates whether or not the details — that is, the contents of the <code>&lt;details&gt;</code> element — are currently visible. The default, <code>false</code>, means the details are not visible.</dd>
</dl>

<h2 id="事件">事件</h2>

<p>In addition to the usual events supported by HTML elements, the <code>&lt;details&gt;</code> element supports the {{event("toggle")}} event, which is dispatched to the <code>&lt;details&gt;</code> element whenever its state changes between open and closed. It is sent <em>after</em> the state is changed, although if the state changes multiple times before the browser can dispatch the event, the events are coalesced so that only one is sent.</p>

<p>You can listen for the <code>toggle</code> event to detect when the widget changes state:</p>

<pre class="brush: js">details.addEventListener("toggle", event =&gt; {
  if (details.open) {
    /* the element was toggled open */
  } else {
    /* the element was toggled closed */
  }
});</pre>

<h2 id="例子">例子</h2>

<h3 id="A_simple_disclosure_example">A simple disclosure example</h3>

<p>This example shows a <code>&lt;details&gt;</code> element with no provided summary.</p>

<pre class="brush: html">&lt;details&gt;
  &lt;p&gt;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.&lt;/p&gt;
&lt;/details&gt;</pre>

<p>In this situation, the browser will use a default summary string (usually "Details"). Here's what your browser does with it:</p>

<p>{{EmbedLiveSample("A_simple_disclosure_example", 650, 150)}}</p>

<h3 id="Providing_a_summary">Providing a summary</h3>

<p>This example adds a summary to the above example by using the {{HTMLElement("summary")}} element inside <code>&lt;details&gt;</code>, like this:</p>

<pre class="brush: html">&lt;details&gt;
  &lt;summary&gt;System Requirements&lt;/summary&gt;
  &lt;p&gt;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.&lt;/p&gt;
&lt;/details&gt;</pre>

<p>The result from this HTML is this:</p>

<p>{{EmbedLiveSample("Providing_a_summary", 650, 150)}}</p>

<h3 id="Creating_an_open_disclosure_box">Creating an open disclosure box</h3>

<p>To start the <code>&lt;details&gt;</code> box in its open state, add the Boolean <code>open</code> attribute:</p>

<pre class="brush: html">&lt;details open&gt;
  &lt;summary&gt;System Requirements&lt;/summary&gt;
  &lt;p&gt;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.&lt;/p&gt;
&lt;/details&gt;</pre>

<p>This results in:</p>

<p>{{EmbedLiveSample("Creating_an_open_disclosure_box", 650, 150)}}</p>

<h3 id="Customizing_the_appearance">Customizing the appearance</h3>

<p>Now let's apply some CSS to customize the appearance of the disclosure box.</p>

<h4 id="CSS">CSS</h4>

<pre class="brush: css">details {
  font: 16px "Open Sans", "Arial", sans-serif;
  width: 620px;
}

details &gt; summary {
  padding: 2px 6px;
  width: 15em;
  background-color: #ddd;
  border: none;
  box-shadow: 3px 3px 4px black;
}

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

<p>This CSS creates a look similar to a tabbed interface, where clicking the tab opens it to reveal its contents.</p>

<h4 id="HTML">HTML</h4>

<pre class="brush: html">&lt;details&gt;
  &lt;summary&gt;System Requirements&lt;/summary&gt;
  &lt;p&gt;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.&lt;/p&gt;
&lt;/details&gt;</pre>

<h4 id="结果">结果</h4>

<p>{{EmbedLiveSample("Customizing_the_appearance", 650, 150)}}</p>

<h3 id="自定义自带部件的样式">自定义自带部件的样式</h3>

<p>自带的三角形可以自定义，但并没有得到广泛支持。由于该元素是标准化的，因此在实验性实施阶段，浏览器如何支持此自定义项有所不同，我们不得不暂时使用多种方法。</p>

<p>{{HTMLElement("summary")}} 元素支持 {{cssxref("list-style")}}缩写属性或者完全属性，比如{{cssxref("list-style-type")}}，可以使用它们任意改变三角（通常是使用{{cssxref("list-style-image")}}）。例如，我们可以使用<code>list-style: none</code>移除三角形。</p>

<p>Chrome 尚不支持此功能，因此我们还需要使用其非标准<code>::-webkit-details-marker</code><a href="/en-US/docs/Web/CSS/Pseudo-elements">伪元素</a>来自定义。</p>

<h4 id="CSS_2">CSS</h4>

<pre class="brush: css; highlight:[12, 15-17]">details {
  font: 16px "Open Sans", "Arial", sans-serif;
  width: 620px;
}

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

details &gt; summary::-webkit-details-marker {
  display: none;
}

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

<p>该 CSS 的外观类似于选项卡界面，在该界面中，激活选项卡将展开并打开它以显示其内容。</p>

<h4 id="HTML_2">HTML</h4>

<pre class="brush: html">&lt;details&gt;
  &lt;summary&gt;System Requirements&lt;/summary&gt;
  &lt;p&gt;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.&lt;/p&gt;
&lt;/details&gt;</pre>

<h4 id="结果_2">结果</h4>

<p>{{EmbedLiveSample("Customizing_the_disclosure_widget", 650, 150)}}</p>

<h2 id="规范">规范</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">规范</th>
   <th scope="col">状态</th>
   <th scope="col">备注</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'interactive-elements.html#the-details-element', '&lt;details&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5.1', 'interactive-elements.html#the-details-element', '&lt;details&gt;')}}</td>
   <td>{{Spec2('HTML5.1')}}</td>
   <td>Initial definition</td>
  </tr>
 </tbody>
</table>

<h2 id="浏览器兼容性">浏览器兼容性</h2>



<p>{{Compat("html.elements.details")}}</p>

<h2 id="参见">参见</h2>

<ul>
 <li>{{HTMLElement("summary")}}</li>
</ul>