时间戳

首页 > 解决方案 > mat-menu: 来自 mat-menu 的覆盖防止下面的菜单被完成 mouseenter

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

问题描述

概括

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

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

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

帮助...

我检查了什么

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

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

样本

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

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

期待

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

而且，我希望浮动菜单一直存在，直到另一个菜单被聚焦。

标签： angularangular-material

解决方案

如果与悬停重叠的叠加层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's 添加了边距，并且可以在您的检查元素上看到覆盖层会与您mat-list-item的 's 重叠，要解决此问题，您可以添加样式绝对位置，以便它仍然应用您的边距样式，但不会与子元素的鼠标检查重叠，如下所示：

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

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

推荐阅读