dom结构组织

1、label、input控制美化
2、引入input元素作为展开、收起的控制:这样可以纯css控制而不必引入js
所以 input元素 必须和 同级的子项 放在同一层级上

其余大致上的构建和菜单Menu类似

  1. <div class="treeview-wrapper">
  2. <ul class="tree">
  3. <li class="tree-item">
  4. <input type="checkbox" checked id="0"/>
  5. <label for="0" class="tree-item-icon">
  6. <span class="tree-item-title">0</span>
  7. </label>
  8. <ul>
  9. <li class="tree-item">
  10. <input type="checkbox" checked id="00"/>
  11. <label for="00" class="tree-item-icon">
  12. <span class="tree-item-title">00</span>
  13. </label>
  14. <ul>
  15. <li class="tree-item"><span class="tree-item-title">000</span></li>
  16. <li class="tree-item"><span class="tree-item-title">001</span></li>
  17. <li class="tree-item"><span class="tree-item-title">002</span></li>
  18. </ul>
  19. </li>
  20. </ul>
  21. </li>
  22. </ul>
  23. </div>

image.png

展开收起交互

当前input点击了的 其下的节点才可见,否则都隐藏
=> 根据input找兄弟元素 ~ 选择器

  1. div.treeview-wrapper input ~ ul {
  2. display: none;
  3. }
  4. div.treeview-wrapper input:checked ~ ul {
  5. display: block;
  6. }

美化-icon

两种状态:
image.png

美化-引导线

image.png

image.png