如何创建一个更好的可展开/折叠 div?

Question

我正在研究显示图像的图像网格功能。我遇到了有关创建可扩展/可折叠div 的问题。

.HTML

<div *ngIf="Display('images')">
<section class="image-grid" *ngFor="let item of items$|async">
<div class="image__cell is-collapsed">
<div class="image--basic">
<img (click)="expandImage()" class="basic__img" src="{{item.link}}">
</div>
<div class="image--expand" [ngClass]="{'image--expand': !_expand}">
<a class="expand__close"></a>
<img class="image--large" src="{{item.link}}">
</div>
</div>
</section>
</div>

.ts 文件

private _maxHeight: string;
private _marginBottom: string;
private _expand: boolean = false;
expandImage() {
this._expand = !this._expand;
this._maxHeight = '500px';
this._marginBottom = '10px';
}

.CSS

.image-grid {
width: 100%;
padding-right: 30px;
padding-left: 30px;
}
.image__cell {
float: left;
position: relative;
}
.basic__img {
height: 200px;
max-width: 100%;
float: left;
overflow: hidden;
}
.image__cell.is-collapsed {
overflow: hidden;
padding: 0.6%;
}
.image__cell.is-collapsed .image--basic {
cursor: pointer;
}
.image--expand {
position: relative;
left: -5px;
padding: 0 5px;
box-sizing: content-box;
overflow: hidden;
background-color: #222;
max-height: 0;
transition: max-height .3s ease-in-out,margin-bottom .1s .2s;
}
.expand__close {
position: absolute;
top: 10px;
right: 20px;
color: #454545;
font-size: 50px;
line-height: 50px;
text-decoration: none;
}
.expand__close:before {
content: '×';
}
.expand__close:hover {
color: #fff;
}
.image--large {
max-width: 100%;
height: auto;
display: block;
padding: 40px;
margin: 0 auto;
box-sizing: border-box;
}

上面的代码创建了一个可扩展的div。但问题是，每当我单击任何一个图像时，div 都会在每一行中展开。我正在尝试创建与此类似的内容：重新创建图像查看器。如果有人能在这方面帮助我，那就太好了。谢谢。:)

Answer 1

我在这里猜测，

将单击的键传递给此功能(click)="expandImage(item.$key)"并在您的代码中

expandImage(key) {
this._expand = !this._expand;
this.clickedItem = key;
this._maxHeight = '500px';
this._marginBottom = '10px';
}

并在您的模板中

<div class="image--expand" *ngIf="clickedItem == item.$key" [ngClass]="{'image--expand': !_expand}">
<a class="expand__close"></a>
<img class="image--large" src="{{item.link}}">
</div>