details、summary如何自定义点击范围？

作者站长头像
站长
· 阅读数 6

看到有大佬利用标签details、summary写了一棵树，https://segmentfault.com/a/1190000043966941，于是我借用下，改成的 tree table，但是目前点击整行都能触发展开或关闭，我希望只能够点击行最前面的图标才触发显示隐藏，改怎么弄呢？

回复
1个回答
avatar
test
2024-06-28

改了一下，好像可行，在summary中额外添加了一层span，然后阻止这个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.addEventListener('click', function(ev){
  if (ev.target.tagName === 'SPAN') { 
    ev.preventDefault()
  }
})

https://codepen.io/xboxyan/pen/poqzORW

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引，对解决问题有帮助
  • 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容