如何处理 Html5 <details> 元素的展开/折叠事件？

Question

我使用详细信息/摘要元素来获取可扩展部分：

https://www.w3schools.com/TAGS/tag_details.asp

d3.select('details')
  .on('click',()=>{
     alert('clicked');
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<details>
  <summary>Header</summary>
  <p>Content</p>
  <p>Content</p>
</details>

我想在切换详细信息元素的打开状态时执行操作。我怎样才能这样做呢？

如果我要使用该onclick事件，则当用户单击摘要或内容时也会触发该事件。我只想处理“点击切换箭头”。

Answer 1

d3.select('details')
  .on('toggle',()=>{
     alert('clicked');
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<details>
  <summary>Header</summary>
  <p>Content</p>
  <p>Content</p>
</details>