自定义details、summary控件的点击范围

目前，使用<details>和<summary>标签创建树形结构时，整个行的点击都会触发折叠或展开操作。为了仅当点击最前面的图标时才触发此操作，可以进行以下调整：

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

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

下载

1. 在summary中添加额外的<span>标签：在<summary>标签中，添加一个额外的<span>标签来包裹图标。
2. 阻止<span>的默认行为：使用css，为<span>设置event-default属性为none，以阻止其默认单击行为（在web中通常触发折叠/展开）。
3. 提高图标的层级：将<span>的z-index值设置为大于<summary>的z-index值，这样在点击图标时，就不会受到<summary>的点击事件影响。

最终代码如下：

.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();
  }
});

通过这些调整，现在只能点击行最前面的图标来触发折叠/展开操作，而不会受点击整行影响。