如何仅通过点击图标来控制``和``的折叠和展开？

珍惜时间，勤奋学习！今天给大家带来《如何仅通过点击图标来控制``和``的折叠和展开？》，正文内容主要涉及到等等，如果你正在学习文章，或者是对文章有疑问，欢迎大家关注我！后面我会持续更新相关内容的，希望都能帮到正在学习的大家！

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

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

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

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

以上就是《如何仅通过点击图标来控制``和``的折叠和展开？》的详细内容，更多关于的资料请关注golang学习网公众号！