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

最佳答案

您为什么不只添加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>

关于javascript - 悬停时闪烁的下拉菜单,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/55742099/

10-12 13:06
查看更多