如何控制 details、summary 的点击范围，只允许图标触发？

在使用

和

创建树形结构时，默认情况下点击整行都会触发展开或关闭。为了只允许点击行最前面的图标才能触发，需要进行一些自定义。

解决方案：

1. 在
   中添加一个额外的 元素，并在该元素上阻止默认行为。
2. 为展开图标的元素设置一个更高的层级，使其不受阻止默认行为的影响。

具体代码如下：

css：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

.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)

通过这些修改，现在只有点击行最前面的图标才会触发显示或隐藏，而点击行其他部分不会触发。