和
点击范围自定义：细节和概要
在 html 中，<details> 和 <summary> 标签可以创建可折叠的内容。通常，单击行中的任何位置都可以展开或关闭内容。但是，为了实现更精细的控制，可以通过自定义点击范围来指定仅特定区域可以触发操作。
问题详情
一位开发者希望构建一个类似树形表的内容，但希望只能通过点击行最前面的图标来显示或隐藏内容，而非整行可点击。
解决方案
调整 <details> 和 <summary> 元素的 css 和事件处理代码可以实现此目标。
在 <summary> 中添加一个额外的 <span> 元素，并为其设置事件处理程序以阻止默认行为：
.tree summary::before {
position: relative;
z-index: 2;
cursor: pointer;
}
.tree summary span::before {
content: '';
position: absolute;
left: 0;
right: 0;
height: 46px;
}
.tree summary span {
pointer-events: none;
}tree.addEventListener('click', function(ev) {
if (ev.target.tagName === 'SPAN') {
ev.preventDefault();
}
});css 代码提高了图标（<span> 元素）的层级，使其位于其他内容之上，并阻止 <span> 元素上的点击事件传播到 <summary> 元素，从而确保只有图标可以触发点击。
此解决方案使点击图标能够展开或关闭内容，同时阻止点击行中的其他区域。
以上就是如何仅通过点击行最前面的图标展开或隐藏 和 标签中的内容？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
734
收藏
