diff options
Diffstat (limited to 'files/ja/web/api/htmldetailselement/toggle_event/index.html')
| -rw-r--r-- | files/ja/web/api/htmldetailselement/toggle_event/index.html | 126 |
1 files changed, 126 insertions, 0 deletions
diff --git a/files/ja/web/api/htmldetailselement/toggle_event/index.html b/files/ja/web/api/htmldetailselement/toggle_event/index.html new file mode 100644 index 0000000000..880b31b439 --- /dev/null +++ b/files/ja/web/api/htmldetailselement/toggle_event/index.html @@ -0,0 +1,126 @@ +--- +title: 'HTMLDetailsElement: toggle イベント' +slug: Web/API/HTMLDetailsElement/toggle_event +tags: + - Event + - HTMLDetailsElement + - Reference + - details + - events + - toggle + - イベント +translation_of: Web/API/HTMLDetailsElement/toggle_event +--- +<div>{{APIRef}}</div> + +<p><strong><code>toggle</code></strong> イベントは、 {{HtmlElement("details")}} 要素の <code>open</code>/<code>closed</code> の状態がトグル切り替えされたときに発生します。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">バブリング</th> + <td>なし</td> + </tr> + <tr> + <th scope="row">キャンセル</th> + <td>不可</td> + </tr> + <tr> + <th scope="row">インターフェイス</th> + <td>{{DOMxRef("Event")}}</td> + </tr> + <tr> + <th scope="row">イベントハンドラープロパティ</th> + <td>なし</td> + </tr> + <tr> + <th>既定のアクション</th> + <td>{{HtmlElement("details")}} 要素の <code>open</code> の状態をトグル切り替えする。</td> + </tr> + </tbody> +</table> + +<h2 id="Examples" name="Examples">例</h2> + +<p>この例は開かれた節をログ出力します。節が閉じられるとログから削除されます。</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: 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></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">body { + display: flex; + flex-direction: row-reverse; +} + +#log { + flex-shrink: 0; + padding-left: 3em; +} + +#summaries { + flex-grow: 1; +}</pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js">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); +});</pre> + +<h3 id="Result" name="Result">結果</h3> + +<p>{{EmbedLiveSample("Examples", 700, 200)}}</p> + +<h2 id="Specifications" name="Specifications">仕様書</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', 'indices.html#event-toggle', 'toggle event')}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("api.HTMLDetailsElement.toggle_event")}}</p> |