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

解决方案：

1. 在
   中添加一个额外的 元素，并在该元素上阻止默认行为。
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)

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

好了，本文到此结束，带大家了解了《如何让 `` 和 `` 仅通过图标触发展开和收起？》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！