单击菜单外时，AngularJs <md-menu-content> 不会关闭答案

【问题标题】：AngularJs <md-menu-content> doesn't get closed when clicking outside the menu单击菜单外时，AngularJs <md-menu-content> 不会关闭
【发布时间】：2019-02-07 02:07:49
【问题描述】：

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

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

当我点击菜单项的外侧时

这里是菜单的代码

<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>

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

【问题讨论】：

创建一个 plunker 来重现您的问题

标签： angularjs menuitem submenu

【解决方案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>

【讨论】：