javascript - 如何在我的树视图中添加加减切换图标

Question

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

我的 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>

我使用这个 CSS 添加图标：

 .caret::after {
    content: "\002B";
    color: black;
    display: inline-block;
    margin-right: 6px;

  } 
  
  .caret::before {
    content: "\2212";
    color: black;
    display: inline-block;
    margin-right: 6px;
  } 

这是一个 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');
          
        });
      }

我只想在此树视图中的加号和减号图标之间切换任何帮助将不胜感激。

标签： javascripthtmlcss