如何控制 details、summary 的点击范围，只允许图标触发？
在使用
创建树形结构时，默认情况下点击整行都会触发展开或关闭。为了只允许点击行最前面的图标才能触发，需要进行一些自定义。
解决方案：
在
中添加一个额外的 元素，并在该元素上阻止默认行为。为展开图标的元素设置一个更高的层级，使其不受阻止默认行为的影响。
具体代码如下：
css：
SciMaster
全球首个通用型科研AI智能体
156 查看详情
.tree summary::before { position: relative; z-index: 2; cursor: pointer;}.tree summary span::before { content: ''; position: absolute; left: 0; right: 0; height: 46px;}
javascript：
tree.addEventListener('click', function(ev) { if (ev.target.tagName === 'SPAN') { ev.preventDefault(); }});
示例：
[点击查看示例](https://codepen.io/xboxyan/pen/poqzorw)
通过这些修改，现在只有点击行最前面的图标才会触发显示或隐藏，而点击行其他部分不会触发。
以上就是如何让 “ 和 “ 仅通过图标触发展开和收起？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1162358.html
具体代码如下：
css：
SciMaster
全球首个通用型科研AI智能体
156 查看详情
.tree summary::before { position: relative; z-index: 2; cursor: pointer;}.tree summary span::before { content: ''; position: absolute; left: 0; right: 0; height: 46px;}
javascript：
tree.addEventListener('click', function(ev) { if (ev.target.tagName === 'SPAN') { ev.preventDefault(); }});
示例：
[点击查看示例](https://codepen.io/xboxyan/pen/poqzorw)
通过这些修改，现在只有点击行最前面的图标才会触发显示或隐藏，而点击行其他部分不会触发。
以上就是如何让 “ 和 “ 仅通过图标触发展开和收起？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1162358.html
微信扫一扫 
支付宝扫一扫 
