相关疑难解决方法(0)

我正在使用Material 2来创建菜单.我有一个md按钮触发器打开一个md菜单.我希望按钮在悬停时打开.我知道Material Angular.io仍然很新.我已经用Google搜索了问题,但我想出了Angularjs的结果.谁能指出我正确的方向？

这是我的html示例:

    <button md-button [mdMenuTriggerFor]="userMenu" class="nav-btn" ><i class="fa fa-user" aria-hidden="true" id="user-icon"></i> NAME</button>
    <md-menu #userMenu="mdMenu" xPosition="before" yPosition="below" [overlapTrigger]="false">
        <button md-menu-item class="nav-dropdown" [routerLink]="['/dashboard']">DASHBOARD</button>
        <button md-menu-item class="nav-dropdown">MY PROFILE</button>
        <button md-menu-item class="nav-dropdown">lOGOUT</button>
    </md-menu>

我被困在这个问题上，当有一个标题多个菜单时，当我第一次打开菜单时没有问题，但如果已经打开了一个菜单，我点击打开第二个菜单它不起作用。它将首先关闭之前打开的菜单，然后我们必须再次单击以打开新菜单。

我想要的是，当我点击一个菜单时，它应该通过单击打开，如果有任何菜单打开，它也会关闭。我在 angular2 材料文档中没有找到任何关于此的内容。

以下是该问题示例的链接：

https://stackblitz.com/edit/angular-8ntb2i

我成功地使菜单出现了mouseenter.我现在要做的是让它mouseleave在菜单本身的事件中消失.有关如何实现这一目标的任何想法？

    <button mat-button [mat-menu-trigger-for]="menu" 
     #menuTrigger="matMenuTrigger" (mouseenter)="menuTrigger.openMenu()">
        TRIGGER BUTTON
    </button>
    <mat-menu #menu="matMenu" [overlapTrigger]="false" 
     (mouseleave)="menuTrigger.closeMenu()">
         <button mat-menu-item [routerLink]="['sources']">
              <mat-icon>view_headline</mat-icon>
              MENU CHOICE
        </button>
    </mat-menu>

此STACKBLITZ（SB）显示了问题。

CSS类.WHYYYYY显示了我面临的“两个”问题。

1. 为了使菜单在悬停时打开，我需要在菜单按钮上进行设置z-index:1050;（ref 2 hacky workaround）。
2. 这就产生了“对话框雾”的问题。（单击按钮-> SB）
3. 我发现叠加层的默认“ z索引为1000”

看来我有两种解决方法。

1. 给雾一个更高的z索引（hack hack）
2. （所需的解决方案）使悬停菜单与常规z-index一起使用。
   • 我不明白我为什么需要z-index:1050;。看来，当打开菜单菜单时，它会瞬间升高“ z索引方向”，因此我触发了按钮事件（实际上是再次关闭其菜单菜单）。

这是错误吗？我可以防止创建的菜单菜单刺穿/刺入吗？如何在雾下禁用工作中的悬停菜单？