不使用VUE组件实现树形下拉方法

可以使用原生的JavaScript和CSS来实现树形下拉菜单。以下是一个简单的实现方法：

HTML代码：

<div class="tree">
  <ul>
    <li>
      <span class="caret">Node 1</span>
      <ul class="nested">
        <li>Node 1.1</li>
        <li>Node 1.2</li>
        <li>Node 1.3</li>
      </ul>
    </li>
    <li>
      <span class="caret">Node 2</span>
      <ul class="nested">
        <li>Node 2.1</li>
        <li>Node 2.2</li>
        <li>Node 2.3</li>
      </ul>
    </li>
  </ul>
</div>

CSS代码：

.tree {
  font-family: sans-serif;
  font-size: 14px;
}

.tree ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.tree li {
  margin: 0;
  padding: 0;
  position: relative;
}

.tree li ul {
  margin-top: 10px;
  display: none;
}

.tree li.open > ul {
  display: block;
}

.tree li span.caret {
  cursor: pointer;
  display: inline-block;
  width: 10px;
  height: 10px;
  background: #000;
  position: relative;
  top: 1px;
  margin-right: 5px;
}

.tree li span.caret:before {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 5px solid #fff;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

.tree li.open > span.caret:before {
  border-left: 0;
  border-right: 5px solid #fff;
  left: auto;
  right: 0;
}

.tree li span.caret:hover {
  background: #ccc;
}

JavaScript代码：

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("open");
    this.classList.toggle("open");
  });
}

这段代码会为每个带有 "caret" 类的元素添加一个点击事件，当点击时，它会切换它的父元素的 "open" 类和它自己的 "open" 类。这些类会在 CSS 中被定义，用于控制下拉菜单的显示和隐藏。