如何在 TreeView 收起时隐藏加载图标（Loading Icon）

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('
');
      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 中 标签需闭合（原文缺失 >，已修正）：。

? 常见错误规避

• ❌ 错误：将 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 = $('', {
          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('
');
            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();
        });
    });
  }
});

? 总结