mat-menu: 来自 mat-menu 的覆盖防止下面的菜单被完成 mouseenter

Question

总结

我尝试使用 mat-nav 和 mat-menu 创建包含多个菜单的侧边导航，然后通过 mouseenter 打开其菜单。

但是，第二个菜单没有打开它的子​​菜单。

我不知道如何处理这个问题，希望得到一些建议。

帮助...

我检查的内容

似乎第一个的子菜单覆盖阻止了第二个的完成。

所以，当我从下到上检查 mouseenter 时，（第二个到第一个）然后它起作用了。

示例

我创建了一个示例。 这是我的堆栈闪电战。 （请单击标题上的汉堡菜单，然后从底部悬停侧边菜单。）

https://stackblitz.com/edit/angular-g88bvg

期待

当我从上到下悬停侧导航时，我的期望是打开第二个菜单。

而且，我希望浮动菜单一直保持到另一个菜单被聚焦为止。

Answer 1

如果覆盖与悬停的mat-list-item 重叠对您来说不是问题，那么只需将其设置为 true，它就会触发您的 openSubMenu 方法就好了，例如：

<div class="example-container">
    <mat-toolbar color="primary" class="example-toolbar">
        <button mat-icon-button (click)="sidenav.toggle()"><mat-icon>menu</mat-icon></button>
    <h1 class="example-app-name">Responsive App</h1>
  </mat-toolbar>

<mat-sidenav-container (backdropClick)="clickBack()" >

    <mat-sidenav class="side-container" mode="over" [fixedInViewport]="true" [opened]="false" #sidenav>

        <mat-list>
            <mat-list-item [matMenuTriggerFor]="menus" #menuTrigger="matMenuTrigger">
                <span (mouseenter)="openSubMenu(menuTrigger)">Apple</span>
            </mat-list-item>
            <mat-menu #menus="matMenu" [overlapTrigger]="true" [hasBackdrop]="false" class="top-sub-menu">
                <div>aaa</div>
                <div>aaa</div>
                <div>aaa</div>
            </mat-menu>
        </mat-list>

        <mat-list>
            <mat-list-item [matMenuTriggerFor]="menus2" #menuTrigger2="matMenuTrigger">
                <span (mouseenter)="openSubMenu(menuTrigger2)">Benjamine</span>
            </mat-list-item>
            <mat-menu #menus2="matMenu" [overlapTrigger]="true" [hasBackdrop]="false" class="top-sub-menu">
                <div>bbb</div>
                <div>bbb</div>
                <div>bbb</div>
            </mat-menu>
        </mat-list>

    </mat-sidenav>
  <mat-sidenav-content class="main-contents">
    Contents
  </mat-sidenav-content>
</mat-sidenav-container>
</div>

编辑： 我发现了您的问题，在查看了您的 css 文件后，我注意到您为您的两个 mat-menu 添加了边距，并且可以在您的检查元素上看到覆盖将与您的 mat-list-item 重叠，以解决此问题您添加绝对样式位置，以便它仍然应用您的边距样式，但不会与子元素的鼠标检查重叠，如下所示：

::ng-deep .top-sub-menu {
    font-size: 14px;
    color: black;
    min-width: 80px;
    margin-left: 60px;
    text-align: center;
    position:absolute;
}

如果您再次关闭[overlapTrigger]，您将获得覆盖的先前行为（您可以打开它或根据自己的喜好）