嗨，我来帮你搞定这个问题！你的核心困扰在于动画队列冲突和状态判断逻辑顺序错误，这两个点导致了第二次点击无法触发渐隐效果。先拆解下你之前尝试的方案哪里出了问题：

你把toggleClass换成addClass后，不管按钮当前状态如何都会强制添加active类，这直接让判断逻辑完全反转——本来应该是「有active类就执行隐藏，没有就执行显示」，但错误的addClass让判断条件永远为真，自然只会重复执行渐显。另外，快速点击时未完成的动画会在队列里排队，新动画要等旧动画结束才会执行，也会导致效果混乱。

下面是修正后的完整代码，我会标注关键改进点：

$('.navTrigger').click(function() {
  // 缓存DOM元素，避免重复查询提升性能
  const $triggerBtn = $(this);
  const $navLinks = $('nav ul > li a');

  // 清空动画队列+停止当前动画，避免新旧动画冲突
  $navLinks.stop(true, true);

  // 先判断当前按钮状态，再执行对应逻辑
  if ($triggerBtn.hasClass('active')) {
    // 已有active类，执行逐个渐隐
    let delay = 1000;
    $navLinks.each(function() {
      $(this).delay(delay).fadeOut(500);
      delay += 400;
    });
    $triggerBtn.removeClass('active');
  } else {
    // 无active类，执行逐个渐显
    let delay = 1000;
    $navLinks.each(function() {
      $(this).delay(delay).fadeIn(500);
      delay += 400;
    });
    $triggerBtn.addClass('active');
  }
});

关键修正说明： #

1. 动画队列管理：用stop(true, true)强制停止所有正在执行的动画，第一个true清空未执行的动画队列，第二个true让当前动画直接跳到结束状态，确保新动画能立刻响应点击。
2. 状态判断逻辑：先检查按钮当前的active状态，再执行对应的渐显/渐隐操作，最后才添加/移除active类，让状态和动画完全匹配。
3. DOM元素缓存：把频繁用到的DOM元素缓存成变量，避免重复查询DOM树，提升代码性能。

额外注意事项： #

要确保导航链接的初始状态是隐藏的，否则第一次点击的渐显效果不会生效，你可以在CSS里添加：

nav ul > li a {
  display: none;
}

如果还是有问题，可以检查这两个点：

• 选择器nav ul > li a是否准确匹配到了目标元素？可以用console.log($navLinks.length)查看选中的元素数量。
• 有没有其他JS代码修改了这些导航链接的display属性？

内容的提问来源于stack exchange，提问作者Jay-oh