我正在研究一个图像网格特性,在其中显示图像。我面临着创建可扩展/可折叠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都会在每一行中展开。我正在尝试创建类似的:Recreating image-viewer。如果有人能帮我解决这个问题,那就太好了。谢谢。:)

最佳答案

我猜这里,
将单击的键传递给此函数(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>

07-24 09:50
查看更多