Treeview展开/折叠图标切换实现方法咨询

要实现Treeview节点展开/折叠时的图标切换，核心是将图标显示与节点的展开状态绑定，通过CSS状态选择器或自定义类来切换图标样式。以下是两种实用的实现方式：

方法一：利用表单控件状态（无JS依赖） #

借助checkbox的checked状态控制节点展开/折叠，同时通过CSS伪元素切换图标，无需额外JavaScript。

HTML结构 #

<ul class="treeview">
  <li>
    <label class="tree-item">
      <input type="checkbox" class="tree-toggle" />
      <span>父节点</span>
    </label>
    <ul class="tree-children">
      <li>子节点1</li>
      <li>子节点2</li>
    </ul>
  </li>
  <li>
    <label class="tree-item">
      <input type="checkbox" class="tree-toggle" />
      <span>嵌套父节点</span>
    </label>
    <ul class="tree-children">
      <li>
        <label class="tree-item">
          <input type="checkbox" class="tree-toggle" />
          <span>子父节点</span>
        </label>
        <ul class="tree-children">
          <li>深层子节点</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

CSS样式 #

/* 隐藏原生checkbox */
.tree-toggle {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.tree-item {
  cursor: pointer;
  display: block;
  padding-left: 24px;
  position: relative;
}

/* 折叠状态图标 */
.tree-item::before {
  content: '▸';
  position: absolute;
  left: 4px;
  top: 0;
  transition: transform 0.2s ease;
}

/* 展开状态：切换图标并显示子节点 */
.tree-toggle:checked + span + .tree-children {
  display: block;
}
.tree-toggle:checked ~ .tree-item::before {
  content: '▾';
  /* 也可用旋转效果替代字符切换：transform: rotate(90deg); */
}

/* 子节点默认隐藏 */
.tree-children {
  display: none;
  padding-left: 16px;
  margin: 4px 0;
}

方法二：JavaScript控制自定义类 #

如果需要更灵活的交互（比如点击节点文字触发切换），可以用JS给节点添加/移除.expanded类，再通过CSS切换图标。

HTML结构 #

<ul class="treeview">
  <li class="tree-node">
    <span class="node-title">父节点</span>
    <ul class="tree-children">
      <li>子节点1</li>
      <li>子节点2</li>
    </ul>
  </li>
</ul>

JavaScript逻辑 #

// 给所有父节点绑定点击事件
document.querySelectorAll('.tree-node').forEach(node => {
  node.addEventListener('click', function(e) {
    e.stopPropagation(); // 阻止事件冒泡，避免父节点重复触发
    this.classList.toggle('expanded');
    // 控制子节点显示/隐藏
    const children = this.querySelector('.tree-children');
    children.style.display = children.style.display === 'block' ? 'none' : 'block';
  });
});

CSS样式 #

.tree-node {
  cursor: pointer;
  padding-left: 24px;
  position: relative;
}

/* 折叠状态图标 */
.tree-node::before {
  content: '▸';
  position: absolute;
  left: 4px;
  top: 0;
  transition: transform 0.2s ease;
}

/* 展开状态图标 */
.tree-node.expanded::before {
  content: '▾';
  /* transform: rotate(90deg); */
}

.tree-children {
  display: none;
  padding-left: 16px;
  margin: 4px 0;
}

.tree-node.expanded .tree-children {
  display: block;
}

扩展优化 #

• 图标替换：可将Unicode字符换成Font Awesome图标（如\f054和\f078）或自定义SVG背景图，只需修改content属性或添加background-image。
• 过渡动画：给图标添加transition属性，让切换效果更流畅。
• 无障碍支持：添加aria-expanded属性，提升组件可访问性。

内容的提问来源于stack exchange，提问作者akornev