【问题标题】：How to handle expand/collapse event of Html5 <details> element?如何处理 Html5 <details> 元素的展开/折叠事件？
【发布时间】：2019-02-19 12:07:32
【问题描述】：

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

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 事件，那么如果用户单击摘要或内容，也会触发该事件。我只想处理“点击切换箭头”。

【问题讨论】：

标签： html events dropdown expander

【解决方案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>

【讨论】：

【解决方案2】：

`summary::-webkit-details-marker`

summary::-webkit-details-marker 是您想要的箭头，不幸的是它在 shadow DOM 中并且不能跨浏览器访问（仅限 Chrome）。

以下演示：

隐藏原来的箭头
将箭头替换为：<b>▶</b>
用 CSS 制作动画
基本 JavaScript 应用于箭头

演示

document.querySelector('summary b').onclick = function(e) {
  console.log('clicked');
};

summary::-webkit-details-marker {
  display: none
}

summary {
  height: 1rem;
  font-size: 1rem;
}

summary:focus {
  outline: none
}

summary b {
  display: inline-block;
  font-size: 0.75rem;
  margin: 0;
  padding: 5px;
  cursor: pointer;
  line-height: 1rem;
  height: 1rem;
  vertical-align: middle;
  transform: rotate(0deg);
  transition: transform 0.3s;
}

[open] b {
  transform: rotate(90deg);
  transition: transform 0.3s;
  transform-origin: 50% 45%;
}

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

【讨论】：