$.fn.extend({
        treed: function (o) {

          var openedClass = 'fa-minus-circle';
          var closedClass = 'fa-plus-circle';

          if (typeof o != 'undefined'){
            if (typeof o.openedClass != 'undefined'){
            openedClass = o.openedClass;
            }
            if (typeof o.closedClass != 'undefined'){
            closedClass = o.closedClass;
            }
          };

            //initialize each of the top levels
            var tree = $(this);
            tree.addClass("tree");
            tree.find('li').has("ul").each(function () {
                var branch = $(this); //li with children ul
                branch.prepend("<i class='indicator fas " + closedClass + "'></i>");
                branch.addClass('branch');
                branch.on('click', function (e) {
                    if (this == e.target) {
                        var icon = $(this).children('i:first');
                        icon.toggleClass(openedClass + " " + closedClass);
                        $(this).append("<div class='loading'><span class='fa fa-spinner fa-spin'</span></div>");         
                          setTimeout(()=>{
                            $(this).find('.loading').remove();
                            $(this).children().children().slideToggle(400);
                          }, 400)
                    }
                })
                branch.children().children().toggle();
            });
            //fire event from the dynamically added icon
          tree.find('.branch .indicator').each(function(){
            $(this).on('click', function () {
                $(this).closest('li').click();
            });
          });
            //fire event to open branch if the li contains an anchor instead of text
            tree.find('.branch>a').each(function () {
                $(this).on('click', function (e) {
                    $(this).closest('li').click();
                    e.preventDefault();
                });
            });
            //fire event to open branch if the li contains a button instead of text
            tree.find('.branch>button').each(function () {
                $(this).on('click', function (e) {
                    $(this).closest('li').click();
                    e.preventDefault();
                });
            });
        }
    });

    //Initialization of treeviews

    $('#tree1').treed();
$.fn.extend({
  treed: function (o) {

    var openedClass = 'fa-minus-circle';
    var closedClass = 'fa-plus-circle';

    if (typeof o != 'undefined'){
      if (typeof o.openedClass != 'undefined'){
      openedClass = o.openedClass;
      }
      if (typeof o.closedClass != 'undefined'){
      closedClass = o.closedClass;
      }
    };

//initialize each of the top levels
      var tree = $(this);
      tree.addClass("tree");
      tree.find('li').has("ul").each(function () {
          var branch = $(this); //li with children ul
          branch.prepend("<i class='indicator fas " + closedClass + "'></i>");
          branch.addClass('branch');

          // declare a flag to toggle
          let flag = false;
          branch.on('click', function (e) {
              if (this == e.target) {
                  // toggle on click
                  flag = !flag;
                  var icon = $(this).children('i:first');
                  icon.toggleClass(openedClass + " " + closedClass); 

                  // show loader only when its opened, and collpase once toggled   
                  if(flag) {
                    $(this).append("<div class='loading'><span class='fa fa-spinner fa-spin'</span></div>"); 
                    setTimeout(()=>{
                      $(this).find('.loading').remove();
                      $(this).children().children().slideToggle(400);
                    }, 400)
                  } else {
                    $(this).children().children().slideToggle(400);
                  }
              }
          })
          branch.children().children().toggle();
      });

//fire event from the dynamically added icon
    tree.find('.branch .indicator').each(function(){
      $(this).on('click', function () {
          $(this).closest('li').click();
      });
    });
      //fire event to open branch if the li contains an anchor instead of text
      tree.find('.branch>a').each(function () {
          $(this).on('click', function (e) {
              $(this).closest('li').click();
              e.preventDefault();
          });
      });
      //fire event to open branch if the li contains a button instead of text
      tree.find('.branch>button').each(function () {
          $(this).on('click', function (e) {
              $(this).closest('li').click();
              e.preventDefault();
              });
          });
      }
    });
    
    //Initialization of treeviews
    
    $('#tree1').treed();
    
    $('#tree2').treed({openedClass:'fa-folder-open', closedClass:'fa-folder'});

.tree, .tree ul {
  margin:0;
  padding:0;
  list-style:none;
  margin-left:10px;
}
.tree ul {
  margin-left:1em;
  position:relative
}
.tree ul ul {
  margin-left:.5em
}
.tree ul:before {
  content:"";
  display:block;
  width:0;
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  border-left:1px solid
}
.tree li {
  margin:0;
  padding:0 1em;
  line-height:2em;
  color:#369;
  font-weight:700;
  position:relative;
}
.tree ul li:before {
  content:"";
  display:block;
  width:10px;
  height:0;
  border-top:1px solid;
  margin-top:-1px;
  position:absolute;
  top:1em;
  left:0
}
.tree ul li:last-child:before {
  background:#fff;
  height:auto;
  top:1em;
  bottom:0
}
.indicator {
  margin-right:5px;
}
.tree li a {
  text-decoration: none;
  color:#369;
}
.tree li button, .tree li button:active, .tree li button:focus {
  text-decoration: none;
  color:#369;
  border:none;
  background:transparent;
  margin:0px 0px 0px 0px;
  padding:0px 0px 0px 0px;
  outline: 0;
}

.loading {
  font-style: italic;
}

<div class="row">
    <div class="col-md-4">
       <ul id="tree2">
          <li>
             <a href="#">TECH</a>
             <ul>
                <li>Company Maintenance</li>
                <li>
                   Employees
                   <ul>
                      <li>
                         Reports
                         <ul>
                            <li>Report1</li>
                            <li>Report2</li>
                            <li>Report3</li>
                         </ul>
                      </li>
                      <li>Employee Maint.</li>
                   </ul>
                </li>
                <li>Human Resources</li>
             </ul>
          </li>
          <li>
             XRP
             <ul>
                <li>Company Maintenance</li>
                <li>
                   Employees
                   <ul>
                      <li>
                         Reports
                         <ul>
                            <li>Report1</li>
                            <li>Report2</li>
                            <li>Report3</li>
                         </ul>
                      </li>
                      <li>Employee Maint.</li>
                   </ul>
                </li>
                <li>Human Resources</li>
             </ul>
          </li>
          
       </ul>
    </div>
 </div>
   <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>

我有一个TreeView，并实现了一个加载图标，以便在展开TreeView项时显示（ul/li）。要求是在展开TreeView项时仅显示加载图标，而在关闭TreeView项时不显示加载图标。动画图标运行良好，但不幸的是，它也会在关闭TreeView项目时出现。关闭TreeView项目时，不应显示动画载入图标。我愿意接受这里Maven的任何帮助。