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

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

目前，使用

和

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

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

   的点击事件影响。

最终代码如下：

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

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

以上就是如何仅通过点击图标来控制``和``的折叠和展开？的详细内容，更多请关注其它相关文章！