html - 如何仅在悬停子菜单时显示子菜单项？

Question

我尝试用子菜单制作下拉菜单。

但是 .dropdown-submenu > .dropdown-menu 在我悬停父级 .dropdown-menu 时显示。如何使 .dropdown-submenu > .dropdown-menu 仅在我悬停 .dropdown-submenu 时显示？

.html

<div class="links">
    <div class="link" *ngFor="let link of headerLinks">
        <div class="btn-group" mdbDropdown>
            <a mdbDropdownToggle  class="waves-light main-link" mdbWavesEffect>{{ link.name | translate | uppercase}}</a>
            <div class="dropdown-menu vertical-sublinks animated fadeInUp ">
                    <div class="vertical" *ngFor="let subLink of link.links" >
                        <div>
                            <a class="dropdown-submenu dropdown-item item" href="#" >
                                {{subLink.name | translate}}
                                <div class="right-angle" >
                                        <mat-icon>keyboard_arrow_right</mat-icon>
                                </div>
                            </a>
                            <div class="dropdown-menu submenu-links">
                                <h1>s</h1>
                            </div>
                        </div>

                    </div>
                </div>
             </div>
    </div>
</div>

.ts

export class HeaderLinksComponent implements OnInit {
    headerLinks = [
        {
            name: '1',
            links: [ '1.1', '1.2' ]
        },
        {
            name: '2',
            links: [
                {
                    name: '2.1',
                    sublinks: [ '2.1.1', '2.1.2' ]
                },
                {
                    name: '2.2'
                }
            ]
        }
    ];

    constructor() {}

    ngOnInit() {}


}

.scss

.links {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.link {
    font-size: 13px;
    font-weight: 700;
    padding: 33px 3px;
    color: #000;
    line-height: 25px;
    letter-spacing: 1px;
}

a,
.a-link {
}
.link:hover .main-link {
    color: #ff8f0f;
    cursor: pointer;
}

.link:hover .dropdown-menu {
    display: block;
}

.grid {
    display: grid;
    grid-template-columns: repeat(3, 299px);
    width: 898px;
    & a {
        font-weight: bold;
    }
}

.vertical-sublinks {
    margin-left: -19px;
}
.vertical {
    width: 280px;
}

.vertical a {
    padding: 13px 30px 12px 30px;
    font-size: 16px;
    letter-spacing: 0px;
}

.grid a {
    font-size: 13px;
    width: 100%;
    padding: 13px 31px;
}

.grid a:hover,
.lang a:hover {
    color: #ff8f0f;
}

.vertical a {
    color: #5f727f;
}

.vertical a:hover,
.right-angle:hover {
    color: #333;
}

.navbar {
    min-height: 90px;
    padding: 12px 0;
}

.dropdown-menu {
    background-color: #f4f6f7;
    padding: 0;
}

.cources {
    margin-left: -210px;
}

.animated {
    animation-duration: 0.2s;
}

.item:hover {
    box-shadow: 3px 0 0 #ff8f0f inset;
}

.cource-item {
    border-bottom: 1px solid #dfe5e8;
    border-right: 1px solid #dfe5e8;
}
.item {
    border-bottom: 1px solid #dfe5e8;
}

.dropdown-item:active {
    background-color: #f4f6f7;
}

.right-angle {
    display: inline;
    position: absolute;
    right: 5px;
    top: 47%;
    margin-top: -33px;
    font-weight: lighter;
    color: #5f727f;
}

.material-icons {
    font-size: 15px;
}

@media (max-width: 1211px) {
    .links {
        flex-direction: column;
    }

    .link:hover .dropdown-menu {
        display: none;
    }
}

现在，当我悬停 2 - 显示 2.1、2.2、2.1.1、2.1.2。我希望当我悬停 2 时显示 2.1、2.2。当我只悬停 2.1 - 显示 2.1.1、2.1.2

Answer 1

Angular 提供了鼠标事件，可以帮助实现预期的结果。

逻辑:基本上使面板显示和隐藏在一个变量的基础上，该变量在 id basic 上工作，该 id basic 与在 mouseEnter 和 Leave 上更改的名称相匹配。

应用.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  isOpen: any;
 headerLinks = [
        {
            name: '1',
            links: [{
                    name: '1.1',
                    sublinks: [ '1.1.1', '1.1.2' ]
                }, ]
        },
        {
            name: '2',
            links: [
                {
                    name: '2.1',
                    sublinks: [ '2.1.1', '2.1.2' ]
                },
                {
                    name: '2.2'
                }
            ]
        }
    ];

    constructor() {}

    ngOnInit() {}
    showPanel(data){
      this.isOpen = data;
    }
}

app.component.html

<div class="links">
    <div class="link" *ngFor="let link of headerLinks">
        <div class="btn-group" mdbDropdown>
            <a mdbDropdownToggle  class="waves-light main-link" mdbWavesEffect (mouseover)="showPanel(link.name)">Link: {{ link.name}} </a>
            <div  *ngIf="isOpen === link.name "class="dropdown-menu vertical-sublinks animated fadeInUp ">
                    <div class="vertical" *ngFor="let subLink of link.links" >
                        <div *ngIf="subLink.name ">
                            <a class="dropdown-submenu dropdown-item item" href="#" >
                                  Sublink: {{subLink.name }}
                                <div class="right-angle" >

                                </div>
                            </a>
                            <div class="dropdown-menu submenu-links">
                                <!-- <h1>s</h1> -->
                            </div>
                        </div>

                    </div>
                </div>
             </div>
    </div>
</div>

引用资料 https://stackblitz.com/edit/angular-15skfv