Мерцающее выпадающее меню при наведении - PullRequest
Новая
       1

Мерцающее выпадающее меню при наведении

0 голосов
/ 18 апреля 2019

Мне нужно было написать выпадающее меню в javascript, потому что есть несколько аспектов, которые нельзя сделать с помощью CSS.Я столкнулся с этой ошибкой, когда наведу курсор мыши на мой пункт меню, всплывающее подменю, я щелкаю элемент, и он начинает мигать.

Я знаю, что это потому, что я все еще в пределах этого элемента, который снова вызывает мышь.Что я могу сделать в этом случае?

Я не хочу устанавливать таймер ожидания, а затем снова открывать выпадающее меню ... 

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 голос
/ 18 апреля 2019

Почему бы вам просто не добавить функции hideMenu () и showMenu (), так как это то, что вы хотите. Вы хотите скрыть меню в событии mouseleave и показать меню в mouseenter.

Если вы не хотите писать больше кода в событии click, вы также можете вызвать hideMenu () вместо новой функции.

Редактировать (объяснение проблемы)

Это из-за огненных событий. Итак, в основном происходит следующее.

  1. Первоначально vm.showSubmenu = false
  2. mouseenter -> vm.showSubmenu = !vm.showSubmenu; // gets true
  3. нажмите на ссылку -> вызов метода changeState() наборы vm.showSubmenu = false;
  4. подменю скрыто.
  5. событие mouseleave вызывается, и, поскольку вы устанавливаете vm.showSubmenu в false в своем методе changeState(), событие mouseleave отменяет переменную, поэтому подменю снова становится видимым, указатель мыши срабатывает, переменная становится ложной и так на ... 

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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...