懸停時閃爍的下拉菜單
[英]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.