如何让 `` 和 `` 仅通过图标触发展开和收起？

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

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

解决方案：

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

具体代码如下：

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)

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