检测细节元素的打开或关闭

Question

如何在Javascript中检测何时打开或关闭详细信息元素？除了将侦听器附加到click函数并检查是否设置了open属性之外.

Answer 1

var details = document.querySelector("details")

details.addEventListener("toggle", function() {
 details.firstChild.textContent = "done"
})

<!doctype html>
<details>
 <summary>toggle event</summary>
</details>

Answer 2

要测试当前状态，在没有事件侦听器的情况下，我们可以简单地检查属性是否open已设置：

// Test
onclick = () => {
  console.log(
    !detailElem.hasAttribute("open")
  )
}

<details id="detailElem">
  <summary>Some details</summary>
</details>

糟糕的解决方案。仅通过点击无法打开和关闭详细信息。它可以通过焦点+输入/空格打开/关闭，并使用“setAttribute()”以编程方式打开/关闭。 (4认同)