如何在 TreeView 折叠时隐藏加载图标（仅展开时显示）

花韻仙語 2026-01-17 00:00:00 次阅读

本文详解如何通过状态标志控制 treeview 加载图标的显示逻辑，确保 `fa-spinner` 仅在节点展开时出现、折叠时不显示，避免用户体验干扰。

在实现可交互的树形控件（TreeView）时，

常需在异步加载或 DOM 动画过程中展示加载状态（如旋转的 fa-spinner）。但若不加区分地在每次点击都插入加载图标，就会导致折叠操作也触发加载动画——这不仅违背直觉，还可能造成视觉混乱和性能浪费。

核心问题在于：原始代码中，$(this).append("

...") 被无条件执行，未判断当前是展开还是折叠动作。解决方案是引入一个局部作用域的状态标志（flag），精准追踪每个分支节点的展开/折叠状态。

✅ 正确实现方式：按节点独立维护展开状态

关键修改点如下（已整合进完整插件）：

在 tree.find('li').has("ul").each(...) 循环内部为每个 branch 声明 let flag = false;
点击时先翻转 flag：flag = !flag;
仅当 flag === true（即本次操作为展开）时才插入 loading 元素并延时移除
折叠时（flag === false）直接执行 slideToggle()，跳过加载逻辑

branch.on('click', function (e) {
  if (this === e.target) {
    flag = !flag; // 切换状态
    const icon = $(this).children('i:first');
    icon.toggleClass(openedClass + " " + closedClass);

    if (flag) {
      // ✅ 仅展开时显示加载图标
      $(this).append("");
      setTimeout(() => {
        $(this).find('.loading').remove();
        $(this).children().children().slideToggle(400);
      }, 400);
    } else {
      // ❌ 折叠时跳过加载，立即切换
      $(this).children().children().slideToggle(400);
    }
  }
});

⚠️ 注意事项：flag 必须声明在 .each() 回调内（而非插件顶层），否则所有节点共享同一变量，状态错乱；setTimeout 时间（400ms）应与 slideToggle 动画时长严格一致，确保加载图标在动画开始后、结束前移除；若后续需接入真实异步加载（如 AJAX），可将 setTimeout 替换为 Promise 链，并在数据返回后再移除 .loading 并展开内容。

? 扩展建议：更健壮的加载控制

若需进一步提升体验，可补充以下优化：

添加 CSS 过渡防止闪动：
```
.loading { opacity: 0; transition: opacity 0.15s; }
.loading.show { opacity: 1; }
```
并在 JS 中改为 $(this).append(...).find('.loading').addClass('show')；
使用 data-expanded 属性替代 flag，便于调试与 SSR 兼容；
对已加载过的节点缓存状态，避免重复插入/移除 DOM。

通过这种基于状态的精细化控制，TreeView 的交互反馈既准确又专业——用户能清晰感知“正在加载新内容”，而不会被无关的折叠动画干扰。