如何让HTML页面中的tree view树视图默认全部展开

树视图默认全部展开的调整方法 #

这套树视图的展开逻辑依赖两个类的状态：

• 子节点容器.nested加active类时会显示（展开状态）
• 箭头节点.caret加caret-down类时会显示向下的展开箭头

你可以根据自己的场景任选以下两种方案实现：

方案1：修改静态HTML（适合固定树结构） #

直接给所有嵌套容器和箭头节点加上展开对应的类即可，修改后的HTML代码如下：

<ul id="myUL">
  <li><span class="caret caret-down">Beverages</span>
    <ul class="nested active">
      <li>Water</li>
      <li>Coffee</li>
      <li><span class="caret caret-down">Tea</span>
        <ul class="nested active">
          <li>Black Tea</li>
          <li>White Tea</li>
          <li><span class="caret caret-down">Green Tea</span>
            <ul class="nested active">
              <li>Sencha</li>
              <li>Gyokuro</li>
              <li>Matcha</li>
              <li>Pi Lo Chun</li>
            </ul>
          </li>
        </ul>
      </li>  
    </ul>
  </li>
</ul>

方案2：JS初始化自动展开（适合动态生成的树结构） #

不需要修改HTML，只需要在原有JS绑定点击事件的逻辑中，新增初始化加展开类的逻辑即可，修改后的JS代码如下：

<script>
  var toggler = document.getElementsByClassName("caret");
  var i;

  for (i = 0; i < toggler.length; i++) {
    // 原有点击事件绑定逻辑不变
    toggler[i].addEventListener("click", function() {
      this.parentElement.querySelector(".nested").classList.toggle("active");
      this.classList.toggle("caret-down");
    });
    // 新增默认展开逻辑
    toggler[i].parentElement.querySelector(".nested").classList.add("active");
    toggler[i].classList.add("caret-down");
  }
</script>

两种方案都不会影响原有点击折叠/展开的交互逻辑。

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