Javascript 悬停时闪烁的下拉菜单

我需要用javascript编写下拉菜单，因为有几个方面是CSS无法完成的。当我把鼠标悬停在菜单项上，子菜单弹出，我点击一个元素，它开始闪烁时，我遇到了这个错误

我知道这是因为我仍然在触发鼠标的元素中。在这种情况下我能做什么

我不想设置计时器等待，然后再次打开下拉菜单

angular.module（'app'，[]）
.controller（'mainCtrl'，function（）{
var vm=这个；
vm.showSubmenu=false；
vm.toggleMenu=函数（）{
vm.showSubmenu=！vm.showSubmenu；
}
vm.changeState=函数（）{
//$state.go（'blabla'）；
vm.showSubmenu=false；
}
})

。子菜单{
背景：浅蓝色；
位置：绝对位置；
顶部：45px；
左：0；
填充：20px；
线高：20px；
可见性：隐藏；
}
.子菜单.active-sub{
能见度：可见；
}
.菜单{
列表样式类型：无；
}
ulli{
背景：灰色；
线高：30px；
宽度：150px；
}
.子菜单ul{
位置：相对位置；
浮动：左；
左：0；
}

打开子菜单

为什么不添加hideMenu（）和showMenu（）函数，因为这正是您想要的。 您希望在mouseleave事件中隐藏菜单，并在mouseenter中显示菜单

如果不想在click事件中编写更多代码，也可以调用hideMenu（）而不是新函数

编辑（问题解释）

这是因为火灾事件。所以基本上发生了以下情况

最初

vm.showSubmenu=false

mouseenter->

vm.showSubmenu=！vm.showSubmenu；//获取真值

单击一个链接->方法调用

changeState（）

sets

vm.showSubmenu=false

子菜单被隐藏

mouseleave事件将被激发，并且由于您在

changeState（）

方法中将vm.showsubemon设置为false，mouseleave事件将否定变量，因此子菜单将再次可见，mouseenter将被激发，变量将为false等等

angular.module（'app'，[]）
.controller（'mainCtrl'，function（）{
var vm=这个；
vm.showSubmenu=false；
vm.hideMenu=function（）{vm.showSubmenu=false；}
vm.showMenu=function（）{vm.showSubmenu=true；}
vm.click=function（）{vm.hideMenu（）；}
})

。子菜单{
背景：浅蓝色；
位置：绝对位置；
顶部：45px；
左：0；
填充：20px；
线高：20px；
可见性：隐藏；
}
.子菜单.active-sub{
能见度：可见；
}
.菜单{
列表样式类型：无；
}
ulli{
背景：灰色；
线高：30px；
宽度：150px；
}
.子菜单ul{
位置：相对位置；
浮动：左；
左：0；
}

打开子菜单

应该这样做，你知道为什么使用vm.showSubmenu=的单个函数会像预期的那样工作！vm.showSubmenu没有更新答案，并在代码中简要说明问题。