Question

我有一个div列表，这些列表按如下所示的展开和折叠功能分组。它工作正常，除非我需要两次单击按钮才能打开另一个div。第一次点击只会折叠第一格。

<div *ngFor="let item of data; let i = index">
      <button
        (click)="setIndex(i)"
      >
        <span
          [translate]=“item.title”
        ></span>

      </button>
      <div
        [class.collapse]='currentIndex !== i'
      >
        <div [innerHTML]=“item.description | translate"
        ></div>
      </div>
      <hr>

    </div>

我的打字稿功能如下所示。

setIndex(i) {
    this.currentIndex = this.currentIndex === -1 ? i : -1;
  }

我尝试将click事件更改为mousedown或keydown，但没有用。

Answer 1

通过以下方式更改您的setIndex函数：

setIndex(i) {
   this.currentIndex = this.currentIndex === i ? -1 : i;
}

因为第一次单击将currentIndex设置为-1，所以它折叠了第一个div （因为已知currentIndex与所有i值都不同），但您需要将其设置为i （新单击的i）才能显示新的div。

如果当前显示div并再次单击它，则（因此currentIndex === i）我们将其设置为-1，使其折叠。

Answer 2

按如下所示更改您的setIndex()。

说明

我们已声明currentIndex = -1。

当用户单击任何按钮时，我们必须检查currentIndex是否为-1，我们必须在i中设置currentIndex的值。

现在我们有2个选项。如果用户一次又一次单击同一按钮，我们必须检查i === currentIndex

如果第一个div是打开的，则最后一个是currentIndex = 0，现在用户单击第三个按钮，所以index is 2现在，首先我们必须设置currentIndex = -1 and currentIndex = i

html

<div *ngFor="let item of data1; let i = index">
      <button (click)="setIndex(i)">
        <span>{{item.title}}</span>
      </button>
      <div [hidden]='currentIndex !== i'>
        <div>{{item.description}}</div>
    </div>
    <hr>
</div>

ts

setIndex(i) {
    if (this.currentIndex === -1) {
        this.currentIndex = i;
    } else if (this.currentIndex === i) {
        this.currentIndex = i;
    } else {
        this.currentIndex = -1;
        this.currentIndex = i;
    }
}

注意：

这里我仅以[hidden]为例。您可以使用您的

按钮需要单击两次以折叠html角中的div

2 个答案:

说明

html

ts

注意：