Question

我需要用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>

Answer 1

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

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

编辑（问题的说明）

这是因为解雇事件。因此，基本上发生了以下情况。

最初vm.showSubmenu = false
mouseenter-> vm.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>

悬停时闪烁的下拉菜单

1 个答案: