HTMLDetailsElement: toggle-Ereignis

Das toggle-Ereignis wird ausgelöst, wenn der open/closed-Zustand eines <details>-Elements umgeschaltet wird.

Dieses Ereignis kann nicht abgebrochen werden und blubbert nicht.

Hinweis: Das toggle-Ereignis ist auch in einer anderen Form auf HTMLElement verfügbar; diese Version wird bei Popover-Elementen ausgelöst, unmittelbar nachdem sie angezeigt oder verborgen wurden. Weitere Informationen finden Sie auf der HTMLElement-toggle-Ereignisseite.

Syntax

Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Ereignishandler-Eigenschaft.

addEventListener("toggle", (event) => {});

ontoggle = (event) => {};

html

<details ontoggle="console.log(this.open)" open>...</details>

Hinweis: Im obigen Beispiel wird der Ereignis-Listener einmal aufgerufen, ohne dass eine Benutzerinteraktion stattfindet, da das open-Attribut gesetzt ist. Der Einsatz von Ereignishandlern auf diese Weise wird nicht empfohlen.

<aside id="log">
  <p>Open chapters:</p>
  <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">
  <p>Chapter summaries:</p>
  <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

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);
});

Ergebnis

Spezifikationen

Specification
HTML Standard # event-toggle

Browser-Kompatibilität

BCD tables only load in the browser