javascript - 如何在纯 javascript 中创建带有复选框的可折叠 TreeView

Question

我想仅使用 css 和 javascript 创建 TreeView Accordion 结构，不使用库。

在此 TreeView 中，所有元素都必须是复选框，因此当它们被选中时，它们会显示子元素，当它们未被选中时，它们会隐藏它们。

请任何人都可以帮助我。

下面是我需要重现的示例图像，但带有复选框，不必看起来完全那样。

谢谢。

Answer 1

看看这个，这是我刚刚制作的一个非常简单的解决方案，它缺少减号和加号图标，您可以使用 css 添加它们。

https://jsfiddle.net/erubielgm/93k1wqxg/

CSS

.child-check{
  margin-left: 15px;
  display: none;
}

.child-check.active{
  display: block;
}

HTML

<div class="parent-check">
   <input type="checkbox"><label>Level 1</label>
   <div class="child-check">
     <input type="checkbox"><label>Level 1.1</label>
     <div class="child-check">
       <input type="checkbox"><label>Level 1.1</label>
     </div>
   </div>
</div>
<div class="parent-check">
   <input type="checkbox"><label>Level 2</label>
     <div class="child-check">
       <input type="checkbox"><label>Level 2.1</label>
     </div>
</div>

JavaScript

var checks = document.querySelectorAll("input[type=checkbox]");

for(var i = 0; i < checks.length; i++){
  checks[i].addEventListener( 'change', function() {
    if(this.checked) {
       showChildrenChecks(this);
    } else {
       hideChildrenChecks(this)
    }
  });
}

function showChildrenChecks(elm) {
   var pN = elm.parentNode;
   var childCheks = pN.children;

  for(var i = 0; i < childCheks.length; i++){
      if(hasClass(childCheks[i], 'child-check')){
          childCheks[i].classList.add("active");      
      }
  }

}

function hideChildrenChecks(elm) {
   var pN = elm.parentNode;
   var childCheks = pN.children;

  for(var i = 0; i < childCheks.length; i++){
      if(hasClass(childCheks[i], 'child-check')){
          childCheks[i].classList.remove("active");      
      }
  }

}

function hasClass(elem, className) {
    return new RegExp(' ' + className + ' ').test(' ' + elem.className + ' ');
}