打开另一个时隐藏 Div（切换）答案

【问题标题】：Hide Div (toggle) when another is opened打开另一个时隐藏 Div（切换）
【发布时间】：2020-07-19 17:13:39
【问题描述】：

我实现了一个切换“系统”，允许我显示或隐藏带有信息的 div。

有一种方法可以让一个工具保持活动状态，也就是说，我希望一次只出现一个 div。

我点击箭头，激活切换并显示 div，如果我点击不同的行，前一个 div 行被隐藏，我只显示当前 div。

.html

<div *ngFor="let item of Items">
    <div class="d-flex flex-row divCamposEtxra">
        <div (click)="toggle(item)">
            <img *ngIf="item.shown" src="https://img.icons8.com/flat_round/64/000000/collapse-arrow--v1.png" style=" height: 30px;margin-right: 8px;"/>
            <img *ngIf="!item.shown" src="https://img.icons8.com/flat_round/64/000000/expand-arrow--v1.png"  style=" height: 30px;margin-right: 8px;"/>
     </div>
            <div>
                {{item.name}}
            </div>
            <div style="margin-left:auto;margin-right: 12px;">
                {{item.id}}
            </div>
        </div>
        <div class="d-flex flex-column" *ngIf="item.shown">
        <span>INFO</span>
    </div>
    </div>

.ts

   toggle(item) {
    item.shown = !item.shown;
  }

问题

我只想一次打开一个 div，如果我按下另一个，前一个会关闭/隐藏。

【问题讨论】：

标签： angular typescript bootstrap-4

【解决方案1】：

更新如下：

您的应用组件：

export class AppComponent  {
  current: number;
  Items=[{
    id:1,
    name:"name",
    shown: false
  },
  {
    id:2,
    name:"name2",
    shown: false
  },
  {
    id:3,
    name:"name3",
    shown: false
  }]

    toggle(item, i) {
    item.shown = !item.shown;
    this.current = i;

  }
}

HTML 为：

<div *ngFor="let item of Items; let i = index">
    <div class="d-flex flex-row divCamposEtxra">
        <!-- <div (click)="toggle(item)"> -->
        <div (click)="toggle(item, i)">
            <img *ngIf="i == current && item.shown" src="https://img.icons8.com/flat_round/64/000000/collapse-arrow--v1.png" style=" height: 30px;margin-right: 8px;"/>
            <img *ngIf="i != current || (i == current && !item.shown)" src="https://img.icons8.com/flat_round/64/000000/expand-arrow--v1.png"  style=" height: 30px;margin-right: 8px;"/>
     </div>
            <div>
                {{item.name}}
            </div>
            <div style="margin-left:auto;margin-right: 12px;">
                {{item.id}}
            </div>
        </div>
        <div class="d-flex flex-column" *ngIf="current == i && item.shown">
        <span>TEXTETETETETETETEETETETASDTASDASDHASDJKLASDJASKDJASKLDJAS</span>
        <span>TEXTETETETETETETEETETETASDTASDASDHASDJKLASDJASKDJASKLDJAS</span>
        <span>TEXTETETETETETETEETETETASDTASDASDHASDJKLASDJASKDJASKLDJAS</span>
        <span>TEXTETETETETETETEETETETASDTASDASDHASDJKLASDJASKDJASKLDJAS</span>
        <span>TEXTETETETETETETEETETETASDTASDASDHASDJKLASDJASKDJASKLDJAS</span>
    </div>
    </div>

【讨论】：