我使用details / summary元素来获得可扩展的部分:
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>
我想在切换detail元素的打开状态时执行一个动作。我怎么能这样做?
如果我使用onclick
事件,如果用户单击摘要或内容,也会触发该事件。我只想处理“点击切换箭头”。
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>
summary::-webkit-details-marker
summary::-webkit-details-marker
是你想要的箭头,不幸的是它在影子DOM中并且访问它不是跨浏览器(仅限Chrome)。
以下演示:
<b>▶</b>
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>