Question

在我的angular 2应用程序中，我正在使用折叠菜单和展开菜单，并根据是否展开项目来切换图标。当前，当我展开菜单项时，图标会正确切换和更改，但对于所有未展开的菜单项，它也会更改。

如何确保仅在单击的菜单项中发生图标css切换。另外，在扩展新项目之前，如何确保上一个扩展项目也已折叠。因此一次只能扩展一个菜单项。

这是我的HTML，它是for循环的一部分：

<a data-toggle="collapse" [attr.aria-controls]="itemType.id" [attr.data-target]="'#'+itemType.id" (click)="toggleCollapse()">
    <span>{{itemType.name}}</span>
    <span class="win-icon" [ngClass]="collapse == 'open' ? 'win-icon-ChevronDown':'win-icon-ChevronLeft'"></span>
</a>

<ul [id]="itemType.id" data-toggle="buttons">
    <li class="btn" routerLinkActive="active">
        <input type="radio">
            <span (click)="...">
                item 1
            </span>
    </li>
    [...]
</ul>

在我的组件中：

public collapse: string = "closed";

public toggleCollapse() {
    this.collapse = this.collapse == "open" ? 'closed' : 'open';
}

Answer 1

使用this.collapse切换将改变所有项目的状态。相反，您可以在itemType中使用temp属性，例如itemType.collapse。并且，循环主数组以使其折叠属性为true，以便在打开当前数组时折叠所有其他项目。

<a data-toggle="collapse" [attr.aria-controls]="itemType.id" [attr.data-target]="'#'+itemType.id"
    (click)="toggleCollapse(itemType, itemsArr)">
     <span>{{itemType.name}}</span>
     <span class="win-icon" [ngClass]="!itemType.collapse ? 'win-icon-ChevronDown':'win-icon-ChevronLeft'"></span>

在组件中：

public toggleCollapse(itemType, itemsArr) {
    itemsArr.forEach((itemType) => {itemType.collapse = true; }); // for making all other items collapsed when the current one is opened
    itemType.collapse = !itemType.collapse;
}

所有项目（而不只是一项）的折叠/展开插入符号图标都会更改

1 个答案: