Question

摘要

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

但是，第二个菜单没有打开其子菜单。

我不知道该如何解决这个问题，想寻求一些建议。

帮助...

我检查的内容

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

所以，当我从下到上检查mouseent时（第二到第一），它就起作用了。

样品

我创建了一个样本。这是我的闪电战。（请单击标题上的汉堡菜单，然后从底部将鼠标悬停在侧面菜单上。）

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都添加了边距，并且在您的inspect元素上可以看到，覆盖层会与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]，您将获得叠加层的先前行为（可以将其打开或按自己的喜好）

mat-menu：来自mat-menu的叠加层可防止在菜单下方进行鼠标输入

1 个答案: