如何在点击时扩展和收缩div的高度？

Question

我想在点击描述时扩展和收缩div的高度。我用

  

的onclick =＆＃34;式=＆＃39;高度：汽车＆＃39;＆＃34;

此代码扩展div。我也想收缩它。

<div style="height: 35px;" onclick="style='height:auto'">

      <p style="color: #9DA4AB;font-size: 15px;" >{{list.TASKDESC}}</p>

      </div>

页面的当前位置 这是当前页面的视图，我将高度设置为35px。

点击div后，它会扩展div。

要求我想在div上点击同意合同。

Answer 1

<强> HTML ：

 <div *ngFor="let list of lists;let i=index" (click)="toggleList(i)" [style.height]="isListExpanded(i)?'auto':'35px'">
      <p>{{list.TASKDESC}}</p>
 </div>

<强> TS ：

export class ClassName{

 shownList = null;

 toggleList(list) {
     if (this.isListExpanded(list)) {
         this.shownList = null;
     } else {
         this.shownList = list;
     }
  };   

  isListExpanded(list) {
     return this.shownList === list;
  };
}

Answer 2

尝试下面的代码

<div class="{{classHeight}}" (click)="onClick()">

      <p style="color: #9DA4AB;font-size: 15px;" >{{list.TASKDESC}}</p>

</div>

制作两个班级

.small-height{
     height: 35px;
}

.big-height{
     height:auto;
}

点击课程更改时

public classHeight: String = "small-height";

  onClick(){
       if(this.classHeight == 'small-height')
           this.classHeight='big-height';
       }else{
         this.classHeight='small-height';
       }
   }