如何在JavaScript中实现TreeView仅展开时显示加载图标，关闭时隐藏？

你的问题核心是状态判断逻辑与DOM实际状态脱节：原代码用独立的flag变量标记展开/关闭，但初始化时子元素隐藏的状态和flag初始值的对应关系容易出错，导致关闭操作时也触发了加载图标。更可靠的方式是直接通过DOM元素的类来判断当前操作类型。

修改方案 #

移除独立的flag变量，通过检查当前展开/折叠图标的类来判断：

• 若图标包含closedClass，说明当前是折叠状态，点击后要展开，此时显示加载图标
• 若图标不包含closedClass，说明当前是展开状态，点击后要关闭，不显示加载图标

修改后的完整JavaScript代码 #

$.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;
      }
    };

    // 初始化顶级节点
    var tree = $(this);
    tree.addClass("tree");
    tree.find('li').has("ul").each(function () {
        var branch = $(this); // 包含子ul的li节点
        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');
                // 判断当前是否为折叠状态（即将展开）
                var isCollapsed = icon.hasClass(closedClass);
                
                icon.toggleClass(openedClass + " " + closedClass); 

                // 仅在展开操作时显示加载图标
                if(isCollapsed) {
                  $(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().hide();
    });

    // 绑定动态添加的图标点击事件
    tree.find('.branch .indicator').each(function(){
      $(this).on('click', function () {
          $(this).closest('li').click();
      });
    });
    // 绑定包含a标签的节点点击事件
    tree.find('.branch>a').each(function () {
        $(this).on('click', function (e) {
            $(this).closest('li').click();
            e.preventDefault();
        });
    });
    // 绑定包含button标签的节点点击事件
    tree.find('.branch>button').each(function () {
        $(this).on('click', function (e) {
            $(this).closest('li').click();
            e.preventDefault();
        });
    });
  }
});

// 初始化TreeView
$('#tree1').treed();
$('#tree2').treed({openedClass:'fa-folder-open', closedClass:'fa-folder'});

关键修改说明 #

1. 移除flag变量：改用icon.hasClass(closedClass)直接判断DOM状态，彻底避免状态不一致的问题
2. 统一初始化状态：将branch.children().children().toggle()改为hide()，确保初始化时子元素隐藏，与折叠图标状态完全匹配
3. 精准控制加载图标：只有在展开操作时才添加加载动画，关闭操作直接执行折叠动画

你的CSS和HTML代码无需修改，直接保留即可。

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