AngularJs 单击菜单外部时不会关闭

Question

我已经实现了一个角度js菜单，引用this文章，我的菜单项也包含一个子菜单。当我将鼠标放在菜单项上时子菜单打开，但是当我将鼠标移动到另一个菜单项或当我单击窗口中的其他位置时（菜单区域除外），子菜单项不会关闭。

当我在菜单项上移动鼠标时

当我点击菜单项旁边

这是菜单的代码

<md-list-item>
     <md-menu md-position-mode="cascade" >
          <a class="w3-button w3-block w3-flat-clouds w3-left-align menu-button" ng-href="#/register" style="vertical-align: middle"  href="#/register" ng-mouseenter="$mdOpenMenu()"  >
              <md-icon ><i class="material-icons">&#xE8A6;</i></md-icon> 
              <span >Account</span>
          </a>

         <md-menu-content width="4" style="top:64px"  md-autofocus="true">
               <md-menu-item ng-repeat="item in [1, 2, 3]"   >
                     <md-button >Account {{item}}</md-button>
               </md-menu-item>
         </md-menu-content>
     </md-menu>
</md-list-item>

谁能告诉我这种行为的原因或我错过了什么？

Answer 1

看一下这个！

angular.module('myApp', ['ngMaterial']);

<head>
  <link rel="stylesheet" href="https://rawgit.com/angular/bower-material/master/angular-material.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular-animate.js"></script>
  <script src="https://rawgit.com/angular/bower-material/master/angular-material.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular-aria.js"></script>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>

<body>
  <div ng-app="myApp" ng-cloak>
    <md-menu-bar>
      <md-menu>
        <button class="md-button md-raised md-default" ng-click="$mdOpenMenu()">
              Menu
            </button>
        <md-menu-content>
          <md-list-item>
            <md-menu md-position-mode="cascade">
              <a class="w3-button w3-block w3-flat-clouds w3-left-align menu-button" ng-href="#/register" style="vertical-align: middle" href="#/register" ng-mouseenter="$mdOpenMenu()">
                <md-icon><i class="material-icons">&#xE8A6;</i></md-icon>
                <span>Account</span>
              </a>

              <md-menu-content width="4" style="top:64px" md-autofocus="true">
                <md-menu-item ng-repeat="item in [1, 2, 3]">
                  <md-menu>
                    <md-button>Account {{item}}</md-button>
                  </md-menu>
                </md-menu-item>
              </md-menu-content>
             
          </md-list-item>

        </md-menu-content>
        </md-menu>
    </md-menu-bar>
  </div>
</body>

AngularJs 单击菜单外部时不会关闭

问题描述投票：0回答：1

1个回答

最新问题

AngularJs 单击菜单外部时不会关闭

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1