使用preventDefault等待菜单动画完成后跳转页面失效的技术求助

先看你的JS代码里的核心问题：jQuery的addClass()方法不支持传入回调函数，这就是为什么你点击链接后没有跳转反应——那段window.location = href;的代码根本没被执行到！下面分两个问题给你具体的解决思路：

一、解决「等待菜单类添加完成后跳转」的问题 #

如果你的.menu-trigger类是用来触发菜单的CSS过渡/动画效果，那你需要监听动画结束的事件，而不是依赖不存在的addClass回调。这里分两种场景处理：

场景1：用CSS Transition实现菜单动画 #

修改JS代码，先添加触发类，再监听过渡结束事件，确保动画完成后再跳转：

$('.menu-item a').click(function(event) {
  event.preventDefault();
  const href = $(this).attr('href');
  const menuItem = $('.menu-item');
  
  // 添加触发类启动动画
  menuItem.addClass('menu-trigger');
  
  // 监听过渡结束事件，确保只触发一次跳转
  menuItem.one('transitionend', function() {
    window.location = href;
  });
});

补充：如果你的过渡涉及多个CSS属性（比如同时过渡宽度和透明度），transitionend会触发多次，你可以通过event.propertyName指定只在目标属性过渡完成后跳转：

menuItem.one('transitionend', function(event) {
  if (event.propertyName === 'opacity') { // 替换成你实际过渡的属性
    window.location = href;
  }
});

场景2：用jQuery animate()实现菜单动画 #

如果是用jQuery的动画方法实现菜单效果，直接用animate的回调函数即可：

$('.menu-item a').click(function(event) {
  event.preventDefault();
  const href = $(this).attr('href');
  
  $('.menu-item').animate({
    // 这里填写你的动画属性，比如 width: '100%', opacity: 1
  }, 300, function() {
    // 动画完成后执行跳转
    window.location = href;
  }).addClass('menu-trigger');
});

二、解决「菜单关闭后触发测试alert」的问题 #

假设菜单关闭是通过移除.menu-trigger类实现的，你可以通过监听过渡结束事件或者在关闭逻辑中直接添加alert：

方法1：监听关闭后的过渡结束事件 #

// 假设点击关闭按钮触发菜单关闭
$('.menu-close-btn').click(function() {
  const menuItem = $('.menu-item');
  menuItem.removeClass('menu-trigger');
  
  // 等待关闭动画结束后触发alert
  menuItem.one('transitionend', function() {
    alert('菜单已关闭！');
  });
});

方法2：在自定义关闭逻辑中直接调用 #

如果你的菜单关闭有独立的函数，直接在逻辑末尾添加alert即可：

function closeMenu() {
  // 你的菜单关闭逻辑：比如移除类、隐藏元素等
  $('.menu-item').removeClass('menu-trigger').hide();
  // 关闭完成后触发alert
  alert('菜单已关闭！');
}

额外检查建议 #

1. 打开浏览器控制台（F12），执行$('.menu-item a')确认选择器能正确选中目标链接；
2. 检查.menu-trigger类的CSS是否包含过渡/动画属性，否则添加类后会立刻跳转，看不到预期效果；
3. 查看控制台是否有JS报错（比如未引入jQuery、变量未定义等），这也是点击无反应的常见原因。

内容的提问来源于stack exchange，提问作者Kristijonas Norkus