Question

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

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

当我单击菜单项旁边时

这是菜单的代码

<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 <md-menu-content>不会关闭

1 个答案: