移动端点击链接后CSS加载图标无法自动隐藏，需实现3秒后隐藏

我来帮你搞定这个加载图标一直显示的bug～先看看你现有代码的问题：每次点击链接都会重复创建新的.loadingDiv元素，而且显示逻辑有点混乱，导致侧边菜单点击后多个加载层叠加，看起来就像一直没消失。

修复方案：统一管理加载元素+优化动画逻辑 #

第一步：确保加载元素唯一

不要每次点击都新建加载层，要么提前在HTML里写好，要么在JS里判断是否存在再创建，避免重复叠加：

<!-- 提前在页面<body>内添加这个加载元素 -->
<div class="loadingDiv mobileShow"></div>

第二步：优化JS点击事件逻辑

我们要保证每次点击链接时，都复用同一个加载元素，并且清空之前的动画队列，避免冲突：

$(function() {
  // 初始化加载元素（如果页面没提前添加，自动创建一个）
  if (!$('.loadingDiv').length) {
    $('<div class="loadingDiv mobileShow"></div>').prependTo(document.body);
  }

  $('a').click(function(e) {
    // 如果你侧边菜单的链接不需要跳转页面，取消下面注释阻止默认行为
    // 比如点击菜单只是关闭弹窗：
    // if ($(this).closest('.sidebar-menu').length) {
    //   e.preventDefault();
    // }

    const loadingEl = $('.loadingDiv');
    // 停止之前未完成的动画，清空队列，避免多次点击导致动画堆积
    loadingEl.stop(true, true);
    // 显示加载图标，3秒后自动隐藏
    loadingEl.fadeIn('slow').delay(3000).fadeOut();
  });
});

改动说明

• stop(true, true)：终止加载元素之前所有未完成的动画，清空动画队列，确保每次点击都是全新的「显示→隐藏」流程，不会因为多次点击导致图标一直停留在页面。
• 只初始化一次加载元素：避免重复创建多个.loadingDiv，导致旧元素没被正确隐藏。
• 简化动画链：把fadeIn和delay+fadeOut连起来写，逻辑更清晰。

你的CSS样式可以保持不变，示例如下：

.loadingDiv {
  position: fixed;
  left: 45%;
  /* 你的其他样式：比如加载动画、背景、尺寸等 */
}
.mobileShow {
  /* 移动端专属样式，比如调整位置、尺寸 */
}

这样不管是普通链接还是侧边菜单的链接，点击后加载图标都会在3秒后自动消失啦～

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