Меню расширяется при наведении в angular.js

Question

Меню расширяется при наведении в angular.js

0

У меня проблема с расширяемым и разборным меню при наведении мыши, у меня есть код вроде этого:

html:

  <div ng-mouseout="showMenu=false" class="dashboard-menu">
      <div ng-show="showMenu" class="sub-menu">
        <ul>
          <li><a class="lighting"><span>Add an action</span><span class="icon"></span></a></li>
          <li><a class="html"><span>Add HTML/JS</span><span class="icon"></span></a></li>
          <li><a class="image"><span>Add an image</span><span class="icon"></span></a></li>
        </ul>
      </div>
      <div ng-mouseover="showMenu=true"><span class="icon plus"></span></div>
    </div>

css:

.icon {
  width: 60px;
  height: 60px;
  display: inline-block;
  background: #000;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
}
.plus {
  float: right;
}
.dashboard-menu {
  position: fixed;
  bottom: 10px;
  right: 10px;
}

почему меню скрывается, когда я из.plus значок? Как это исправить? Вот плункер.

jcubic 19 авг. 2016, в 16:49

Источник

Теги:

angularjs

css

menu

2 ответа

Ещё вопросы

Stewart Hering · Answer 1 · 2016-08-19T12-01-00.000Z

Мне также удалось заставить ваш код работать, добавив ng-mouseover="showMenu=true" в div-панель панели инструментов.

<body ng-app>
    <div class="dashboard-menu" ng-mouseover="showMenu=true" ng-mouseout="showMenu=false">
      <div ng-show="showMenu" class="sub-menu">
        <ul>
          <li><a class="lighting"><span>Add an action</span><span class="icon"></span></a></li>
          <li><a class="html"><span>Add HTML/JS</span><span class="icon"></span></a></li>
          <li><a class="image"><span>Add an image</span><span class="icon"></span></a></li>
        </ul>
      </div>
      <div ng-mouseover="showMenu=true"><span class="icon plus"></span></div>
    </div>
  </body>

"showmenu = true" работает, но тогда, я не знаю, почему вы хотите, чтобы меню там оставалось, когда намерение состоит в том, чтобы оно автоматически скрывалось, я действительно не понимаю, о чем спрашивает этот парень
@Ricky У него были проблемы с автоматическим скрытием меню, прежде чем что-либо могло быть сделано из-за того, что меню скрывалось, как только мышь оставляла кнопку, чтобы отобразить меню.

jcubic · Answer 2 · 2016-08-19T13-00-00.000Z

Исправлена проблема с ng-mouseleave.