触发器'mouseleave' - 在移动设备上无法正常工作

问题描述

我在标题中有一个汉堡菜单按钮，用于打开和关闭菜单。我有 hover 和 focus 动画。

因此，当菜单被点击、轻敲或触摸（在移动设备上）时 - 第二次它会丢失 hover 和 focus 样式。下面代码中的所有内容都运行良好，但触发器 mouseleave 不起作用。我测试了我的代码，发现在移动设备上，当一个人点击按钮时，hover 动画也适用于那里。因此触发器 mouseleave 应该取消我对汉堡菜单按钮的 hover 效果，但它不起作用。

我已经尝试了所有方法：我已将其放入 setTimeout 函数并尝试了其他不同的事件（例如在不同的浏览器中进行测试）。然而，当用户触摸或点击这个汉堡菜单按钮时，似乎没有什么可以消除移动设备上的 hover 动画。请帮忙，因为我已经被困在这两天了。

//losing focus for menu toggler on smaller devices
var loseFocusMenu = 0;
$(".c-header-nav__toggle").on("click touch",function(){
    if (loseFocusMenu === 0){
        loseFocusMenu++;
    }else if(loseFocusMenu === 1){
        $(".c-header-nav__toggle").trigger('mouseleave');
        $(".c-header-nav__toggle").trigger('blur');
        loseFocusMenu--;
    }
    
});

我正在开发一个 wordpress 主题，所以我正在使用该平台（显然代码中是 jquery）。请帮忙

此外，hover 和 focus 动画来自 style 标签中的内部样式，并来自分配给同一个汉堡菜单按钮的另一个类

解决方法

我通过添加和删除类解决了这个问题。如果你的手被绑住了，你不能像我一样用其他任何方式来做，这就是解决办法

eventtrigger javascript jquery mouseleave