Как отображать элементы подменю только при наведении подменю? - PullRequest
Новая
       8

Как отображать элементы подменю только при наведении подменю?

0 голосов
/ 16 июня 2019

Я пытаюсь сделать выпадающее меню с подменю.

Но .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

1 Ответ

0 голосов
/ 16 июня 2019

Angular предоставляет события мыши, которые могут помочь в достижении желаемого результата.

Логика: в основном заставьте панель показывать и скрывать основную переменную, которая работает с идентификатором basic, совпадающим с именем, которое изменяется на mouseEnter и Leave.

app.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

...