如何处理 Html5 <details> 元素的 expand/collapse 事件?
How to handle expand/collapse event of Html5 <details> element?
我使用 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>
我想在细节元素的打开状态切换时执行一个动作。我该怎么做?
如果我要使用 onclick
事件,则当用户单击摘要或内容时也会触发该事件。我只想处理 "clicks on the toggle arrow".
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
summary::marker
就是你想要的箭头,可惜在阴影里DOM 并且不能跨浏览器访问(仅 Chrome)。
以下演示:
隐藏原来的箭头
箭头替换为:<b>▶</b>
动画 CSS
基本JavaScript应用于箭头
演示
document.querySelector('summary b').onclick = function(e) {
console.log('clicked');
};
summary::marker {
content: "";
}
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%;
}
<details>
<summary><b>▶</b>Header</summary>
<p>Content</p>
<p>Content</p>
</details>
我使用 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>
我想在细节元素的打开状态切换时执行一个动作。我该怎么做?
如果我要使用 onclick
事件,则当用户单击摘要或内容时也会触发该事件。我只想处理 "clicks on the toggle arrow".
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
summary::-webkit-details-marker
summary::marker
就是你想要的箭头,可惜在阴影里DOM 并且不能跨浏览器访问(仅 Chrome)。
以下演示:
隐藏原来的箭头
箭头替换为:
<b>▶</b>
动画 CSS
基本JavaScript应用于箭头
演示
document.querySelector('summary b').onclick = function(e) {
console.log('clicked');
};
summary::marker {
content: "";
}
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%;
}
<details>
<summary><b>▶</b>Header</summary>
<p>Content</p>
<p>Content</p>
</details>