本文详解如何通过状态标志（flag）控制 treeview 展开/收起时的加载图标显示逻辑，确保仅在展开子节点时显示旋转加载动画，收起时不触发、不残留，提升用户体验与交互准确性。
在基于 jQuery 实现的 TreeView 组件中，常见需求是：仅在用户点击展开（open）节点时显示加载动画（如 fa-spinner fa-spin），而在收起（close）节点时完全不显示该图标。原始代码中，每次点击都无差别地插入 .loading 元素并执行 slideToggle()，导致收起过程也短暂出现加载图标，违背设计意图。
✅ 核心解决方案：引入局部状态标志（flag）
关键在于为每个可折叠的 <li> 分支（branch）维护一个独立的布尔状态变量 flag，用于记录当前是否处于“已展开”状态。该变量必须声明在 tree.find('li').has("ul").each(...) 的迭代作用域内（即每个 branch 独享一份），而非函数顶层——否则所有节点将共享同一 flag，导致状态错乱。
branch.on('click', function (e) {
if (this === e.target) {
const icon = $(this).children('i:first');
const $childrenUl = $(this).children('ul'); // 更精准的目标元素
// 切换状态：true → 展开；false → 收起
flag = !flag;
// 更新图标类
icon.toggleClass(openedClass + ' ' + closedClass);
if (flag) {
// 【展开时】：插入 loading，延时移除并展开内容
$(this).append('<div class="loading"><span class="fa fa-spinner fa-spin"></span></div>');
setTimeout(() => {
$(this).find('.loading').remove();
$childrenUl.slideDown(400); // 推荐用 slideDown/slideUp 替代 slideToggle，语义更清晰
}, 400);
} else {
// 【收起时】：直接收起，不插入、不显示 loading
$childrenUl.slideUp(400);
}
}
});? 注意细节优化：使用 $(this).children('ul') 明确目标子菜单，避免 children().children() 这种模糊选择器可能引发的意外行为；slideDown() / slideUp() 比 slideToggle() 更可控，配合 flag 可完全解耦展开/收起逻辑；HTML 中 <span> 标签需闭合（原文缺失 >，已修正）：<span class='fa fa-spinner fa-spin'></span>。
? 常见错误规避
- ❌ 错误：将 let flag = false 写在 $.fn.treed 函数顶部 → 所有分支共用一个 flag，状态同步失效；
- ❌ 错误：未清理 .loading 元素即再次点击 → 多个 loading 叠加或残留；
- ❌ 错误：在 else 分支中遗漏 slideUp() → 收起无动画，体验割裂。
✅ 完整推荐写法（精简整合版）
$.fn.extend({
treed: function (options) {
const opts = $.extend({
openedClass: 'fa-minus-circle',
closedClass: 'fa-plus-circle'
}, options);
return this.each(function () {
const $tree = $(this).addClass('tree');
$tree.find('li').has('ul').each(function () {
const $branch = $(this);
const $icon = $('<i>', {
class: `indicator fas ${opts.closedClass}`
}).prependTo($branch);
$branch.addClass('branch');
let isOpen = false; // ✅ 每个分支独立状态
$branch.on('click', function (e) {
if (e.target !== this) return;
isOpen = !isOpen;
$icon.toggleClass(`${opts.openedClass} ${opts.closedClass}`);
const $ul = $branch.children('ul');
if (isOpen) {
$branch.append('<div class="loading"><span class="fa fa-spinner fa-spin"></span></div>');
setTimeout(() => {
$branch.find('.loading').remove();
$ul.slideDown(400);
}, 400);
} else {
$ul.slideUp(400);
}
});
// 初始化：默认收起子菜单
$branch.children('ul').hide();
});
// 图标/链接/按钮点击透传
$tree.find('.branch .indicator, .branch>a, .branch>button')
.on('click', function (e) {
$(this).closest('li').click();
e.preventDefault();
});
});
}
});? 总结
隐藏收起时的加载图标，本质是分离展开与收起的 UI 行为逻辑。通过为每个可折叠节点维护独立状态标志，并严格限定其作用域，即可精准控制 loading 元素的创建与销毁时机。此方案轻量、可靠、易于维护，适用于各类基于 jQuery 的树形控件增强场景。
