Question

实际行为
当我单击任何子菜单时，所有子菜单都会更改颜色。

期望的行为
当单击子菜单时，只有一个应该更改颜色，当单击子菜单2时，只有一个应该更改，子菜单1（以及任何其他子菜单，即非子菜单，甚至是任何其他主菜单中的子菜单）都应该返回到它原色。

以下是什么;

<nav class="navigation">
    <ul class="mainmenu">
        <li class="dropdown-content" (click)="onClickHome()"><a href='javascript:void(0)'>Home</a>
        </li>
        <li [class]="hideUsability" *ngFor="let menu of entities">
            <a [ngClass]="{'entities-list__title--active' : menu.isOpen}" (click)="onClickMenu(menu)">{{menu.entity_name}}</a>
            <ul class="dropdown-content" >
                <li [ngClass]="{'btn-add': !menu.isOpen, 'btn-remove': menu.isOpen}" [hidden]="!menu.isOpen" (click)="onClickSubmenu(value.value_id)" *ngFor="let value of menu.values"><a href='javascript:void(0)'>{{value.value_name}}</a></li>
            </ul>
        </li>
    </ul>
</nav>

组件（角度2）

    onClickHome(){
        this.closeAllMenus();
        this.router.navigate(['welcome'], { skipLocationChange: true});
    }

    onClickMenu(menu){
        if (!menu.isOpen){
            this.closeAllMenus();
        }
        menu.isOpen = !menu.isOpen;
    }

    onClickSubmenu(value_id: number){
        if(value_id == 2){
            this.router.navigate(['welcome/metrics.html'], { skipLocationChange: true});
        } else{
            this.router.navigate(['welcome/extractor.html'], { skipLocationChange: true});
        }
    }

    closeAllMenus(){
        this.entities.forEach((menu) =>{
            menu.isOpen = false;
        });
    }

CSS：

.btn-add {
    background-color: red;
} 

.btn-remove {
    background-color: green;
}

Answer 1

您的错误来自menu.isOpen值更改。

....   
  <li [class]="hideUsability" *ngFor="let menu of entities; let i = index">
          <a [ngClass]="{'entities-list__title--active' : isOpen = i}" (click)="onClickMenu(i)">{{menu.entity_name}}</a>
          <ul class="dropdown-content" >
            <li [ngClass]="{'btn-add': isOpen!=i, 'btn-remove': isOpen==i}" [hidden]="isOpen!=i" (click)="onClickSubmenu(value.value_id)" *ngFor="let value of menu.values"><a href='javascript:void(0)'>{{value.value_name}}</a></li>
          </ul>
   </li>
....

    onClickMenu(index){
       this.isOpen=index
    }

Answer 2

解

这是一个更干净的代码，[ngClass] =＆＃34; {active：value.highlighted}＆＃34;我可以选择我想要应用于所需项目的样式，如果它是活动的（真/假），当我的菜单是一个下拉列表，当光标悬停在菜单上显示子菜单时指向其他子菜单隐藏并使用此我可以让菜单保持打开状态显示子菜单并突出显示正确的子菜单。

指出我正在使用两个* ngFor（一个包含对象数组的对象数组）。

HTML

<nav class="navigation">
    <ul class="mainmenu">
        <li class="dropdown-content" (click)="onClickHome()"><a [class]="activeMenuHome">Home</a>
        </li>
        <li *ngFor="let menu of entities"><a>{{menu.entity_name}}</a>
            <ul class="dropdown-content" [hidden]="!menu.isOpen">
                <li *ngFor="let value of menu.values">
                    <a [ngClass]="{active: value.highlighted}" (click)="onClickSubMenu(menu, value)">{{value.value_name}}</a>
                </li>
            </ul>
        </li>
    </ul>
</nav>

COMPONENT（Angular 2）

    onClickHome(){
        this.activeMenuHome="active";
        this.activeSubmenu="";
        this.closeAllMenus();
        this.highlightedOff();
        this.router.navigate(['welcome'], { skipLocationChange: true});
    }

    onClickSubMenu(menu, value){
        this.activeMenuHome="";
        this.closeAllMenus();
        this.highlightedOff();
        menu.isOpen = true;
        value.highlighted = true;
        //More code to navigate
    }

    closeAllMenus(){
        this.entities.forEach((menu) =>{
            menu.isOpen = false;
        });
    }

    highlightedOff(){
        this.entities.forEach((values) =>{
            values.values.forEach((value) => {
                value.highlighted = false;
            });
        });
    }

CSS

.active {
    background-color: #C8E0F6 !important;
    color: #151921 !important;
}

ngClass在li background-color angular 2之间切换

2 个答案: