Наши волонтёры ещё не перевели данную статью на Русский. Присоединяйтесь к нам и помогите сделать эту работу!
Вы можете также прочитать эту статью на English (US).
The toggle event fires when the open state of a <details> element is toggled.
General info
- Specification
- HTML5
- Interface
Event- Bubbles
- No
- Cancelable
- No
- Target
- HTMLDetailsElement
- Default Action
- Toggles the
openstate of the<details>element.
Properties
| Property | Type | Description |
|---|---|---|
target Read only |
EventTarget |
The event target (the topmost target in the DOM tree). |
type Read only |
DOMString |
The type of event. |
bubbles Read only |
Boolean |
Whether the event normally bubbles or not. |
cancelable Read only |
Boolean |
Whether the event is cancellable or not. |
Example
This example logs chapters that are open. Chapters are removed from the log when they are closed.
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);
});