悬停时闪烁的下拉菜单
[英]Flickering dropdown menu on hover
问题描述
我需要用 javascript 编写我的下拉菜单，因为有几个方面不能用 CSS 完成。 当我将鼠标悬停在我的菜单项上时，我遇到了这个错误，子菜单弹出，我点击一个元素，它开始闪烁。
我知道这是因为我仍然在再次触发 mouseenter 的那个元素中。 在这种情况下我能做什么？
我不想设置计时器等待然后再次重新打开下拉菜单...
angular.module('app',[]).controller('mainCtrl', function() { var vm = this; vm.showSubmenu = false; vm.toggleMenu = function() { vm.showSubmenu =.vm;showSubmenu. } vm.changeState = function() { //$state;go('blablabla'). vm;showSubmenu = false; } })
.submenu { background: lightblue; position: absolute; top: 45px; left: 0; padding: 20px; line-height: 20px; visibility: hidden; }.submenu.active-sub { visibility: visible; }.menu { list-style-type: none; } ul li { background: grey; line-height: 30px; width: 150px; }.submenu ul { position: relative; float: left; left: 0; }
<html ng-app="app"> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.5/angular.min.js"></script> </head> <body> <div ng-controller="mainCtrl as vm"> <ul class="menu"> <li ng-mouseenter="vm.toggleMenu()" ng-mouseleave="vm.toggleMenu()">OPEN SUBMENU <div class="submenu" ng-class="{'active-sub':vm.showSubmenu}"> <ul> <li><a href="#" ng-click="vm.changeState()">Link 1</a></li> <li><a href="#" ng-click="vm.changeState()">Link 2</a></li> <li><a href="#" ng-click="vm.changeState()">Link 3</a></li> </ul> </div> </li> </ul> </div> </body> </html>
1 个解决方案
解决方案1
1 已采纳 2019-04-18 09:42:15
为什么不只添加 hideMenu() 和 showMenu() 函数，因为这就是您想要的。 您想在 mouseleave 事件中隐藏菜单并在 mouseenter 中显示菜单。
如果您不想在点击事件中编写更多代码，您也可以调用 hideMenu() 而不是新函数。
编辑（问题的解释）
是因为枪击事件。 所以基本上会发生以下情况。
- 最初
vm.showSubmenu = false - mouseenter ->
vm.showSubmenu =.vm;showSubmenu; // gets truevm.showSubmenu =.vm;showSubmenu; // gets true - 单击链接 -> 方法调用
changeState()设置vm.showSubmenu = false; - 子菜单被隐藏。
- mouseleave 事件被触发，并且由于您在
changeState()方法中将 vm.showSubmenu 设置为 false，mouseleave 事件否定变量，因此子菜单再次可见，mouseenter 被触发，变量变为 false 等等。 .
angular.module('app',[]).controller('mainCtrl', function() { var vm = this; vm.showSubmenu = false; vm.hideMenu = function() { vm.showSubmenu = false; } vm.showMenu = function() { vm.showSubmenu = true; } vm.click = function(){ vm.hideMenu(); } })
.submenu { background: lightblue; position: absolute; top: 45px; left: 0; padding: 20px; line-height: 20px; visibility: hidden; }.submenu.active-sub { visibility: visible; }.menu { list-style-type: none; } ul li { background: grey; line-height: 30px; width: 150px; }.submenu ul { position: relative; float: left; left: 0; }
<html ng-app="app"> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.5/angular.min.js"></script> </head> <body> <div ng-controller="mainCtrl as vm"> <ul class="menu"> <li ng-mouseenter="vm.showMenu()" ng-mouseleave="vm.hideMenu()">OPEN SUBMENU <div class="submenu" ng-class="{'active-sub':vm.showSubmenu}"> <ul> <li><a href="#" ng-click="vm.click()">Link 1</a></li> <li><a href="#" ng-click="vm.click()">Link 2</a></li> <li><a href="#" ng-click="vm.click()">Link 3</a></li> </ul> </div> </li> </ul> </div> </body> </html>
CSS-导航菜单悬停会导致闪烁效果
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.