Javascript 如何在我的树状视图中添加加减切换图标

我有一个树状视图，看起来像：

我的HTML代码是：

<li>
  <a href="#" class="caret">Child</a>
  <ul class="nested">
    <li><a href="#" class="caret">Grand Child</a></li>
    <li>
      <a href="#" class="caret">Grand Child</a>
    </li>
    <li><a href="#" class="caret">Grand Child</a></li>
  </ul>
</li>

这是一个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('active');
          this.classList.toggle('caret-down');
          
        });
      }

var-toggler=document.getElementsByClassName（'caret'）；
var i；
对于（i=0；i

---

我只想在这个树状视图中的加号和减号图标之间切换。如果您有任何帮助，我们将不胜感激。

什么是

切换器

？toggler是一个存储子类的变量，我想实现正负图标之间的切换我不明白“在这个树状视图中在正负图标之间切换”是什么意思。当你点击+或-按钮时，到底会发生什么？好的，当我们点击加号图标时，它会显示展开的子树，加号变为减号，所以当我们再次点击减号时，它会变为先前的状态

 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');
          
        });
      }