From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/zh-cn/web/api/htmldetailselement/index.html | 44 ++++++++ .../api/htmldetailselement/toggle_event/index.html | 120 +++++++++++++++++++++ 2 files changed, 164 insertions(+) create mode 100644 files/zh-cn/web/api/htmldetailselement/index.html create mode 100644 files/zh-cn/web/api/htmldetailselement/toggle_event/index.html (limited to 'files/zh-cn/web/api/htmldetailselement') diff --git a/files/zh-cn/web/api/htmldetailselement/index.html b/files/zh-cn/web/api/htmldetailselement/index.html new file mode 100644 index 0000000000..6b554dc11b --- /dev/null +++ b/files/zh-cn/web/api/htmldetailselement/index.html @@ -0,0 +1,44 @@ +--- +title: HTMLDetailsElement +slug: Web/API/HTMLDetailsElement +translation_of: Web/API/HTMLDetailsElement +--- +

{{APIRef("HTML DOM")}}

+ +

HTMLDetailsElement 接口提供了特殊的属性 (除了常规的 {{domxref("HTMLElement")}} 接口之外，它还可以通过继承获得这些属性) 用于操作 {{HTMLElement("details")}} 元素.

+ +

{{InheritanceDiagram(600, 120)}}

+ +

属性

+ +

从其父级 {{domxref("HTMLElement")}} 继承属性.

+ +
+
{{domxref("HTMLDetailsElement.open")}}
+
是一个 {{domxref("boolean")}} 反射 {{htmlattrxref("open", "details")}} HTML属性, 指示是否向用户显示元素的内容 (不包括 {{HTMLElement("summary")}})
+
+ +

方法

+ +

没有特定的方法；继承其父方法 {{domxref("HTMLElement")}}.

+ +

规格

+ + + +

浏览器兼容性

+ +
+ + +

{{Compat("api.HTMLDetailsElement")}}

+
+ +

另见

+ + diff --git a/files/zh-cn/web/api/htmldetailselement/toggle_event/index.html b/files/zh-cn/web/api/htmldetailselement/toggle_event/index.html new file mode 100644 index 0000000000..b1129b4298 --- /dev/null +++ b/files/zh-cn/web/api/htmldetailselement/toggle_event/index.html @@ -0,0 +1,120 @@ +--- +title: 'HTMLDetailsElement: toggle event' +slug: Web/API/HTMLDetailsElement/toggle_event +translation_of: Web/API/HTMLDetailsElement/toggle_event +--- +
+

{{APIRef}}

+ +

当{{HtmlElement("details")}}元素打开/关闭状态被切换时，切换事件会触发。

+ + + + + + + + + + + + + + + + + + + + + + + + +
BubblesNo
CancelableNo
Interface{{DOMxRef("Event")}}
Event handler propertyNone
Default ActionToggles the open state of the {{HtmlElement("details")}} element.
+ +

例子

+ +

此示例记录打开的章节。 当章节关闭时，它们将从日志中删除。

+ +

HTML

+ +
<aside id="log">
+  <b>Open chapters:</b>
+  <div data-id="ch1" hidden>I</div>
+  <div data-id="ch2" hidden>II</div>
+  <div data-id="ch3" hidden>III</div>
+</aside>
+<section id="summaries">
+  <b>Chapter summaries:</b>
+  <details id="ch1">
+    <summary>Chapter I</summary>
+    Philosophy reproves Boethius for the foolishness of his complaints against Fortune. Her very nature is caprice.
+  </details>
+  <details id="ch2">
+    <summary>Chapter II</summary>
+    Philosophy in Fortune's name replies to Boethius' reproaches, and proves that the gifts of Fortune are hers to give and to take away.
+  </details>
+  <details id="ch3">
+    <summary>Chapter III</summary>
+    Boethius falls back upon his present sense of misery. Philosophy reminds him of the brilliancy of his former fortunes.
+  </details>
+</section>
+ +

CSS

+ +
body {
+  display: flex;
+  flex-direction: row-reverse;
+}
+
+#log {
+  flex-shrink: 0;
+  padding-left: 3em;
+}
+
+#summaries {
+  flex-grow: 1;
+}
+ +

JavaScript

+ +
function logItem(e) {
+  const item = document.querySelector(`[data-id=${e.target.id}]`);
+  item.toggleAttribute('hidden');
+}
+
+const chapters = document.querySelectorAll('details');
+chapters.forEach((chapter) => {
+  chapter.addEventListener('toggle', logItem);
+});
+ +

Result

+ +

{{EmbedLiveSample("Examples", 700, 200)}}

+ +

规范

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'indices.html#event-toggle', 'toggle event')}}{{Spec2("HTML WHATWG")}}
+ +

浏览器兼容性

+ +

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

+ +

{{Compat("api.HTMLDetailsElement.toggle_event")}}

+
-- cgit v1.2.3-54-g00ecf