单击时的 Div 会展开，但再次单击时不会收缩答案

【问题标题】：Div on click expands but does not contract on clicking again单击时的 Div 会展开，但再次单击时不会收缩
【发布时间】：2018-05-19 23:05:26
【问题描述】：

当我点击我的 div 时，它会展开，但当我再次点击时，它不会联系。再次单击 Div 应将其关闭/收缩。

下面是我的 HTML 代码：

<div style="height:35px;" onclick="style='height:auto'">
  <p style="color: #9DA4AB;font-size: 15px;">{{list.TASKDESC}}</p>
</div>

请注意，我正在使用 IONIC，我正在寻找一种最简单的方法来实现这一点。

【问题讨论】：

问题是，onclick 您只是将高度设置为自动 - 您需要一种切换高度的方法
你能指导适当的方式吗，一些代码会有所帮助，比如如何收缩

标签： javascript html ionic-framework ionic2

【解决方案1】：

你可以试试这样的，

在您的 html 中，

<ion-card *ngFor="let qa of groups; let i=index" text-wrap (click)="toggleGroup(i)" [ngClass]="{active: isGroupShown(i)}">

        //header
        <ion-card-header style="white-space: normal;">
            {{qa.id}}. {{qa.question}}
            <ion-icon style="position:absolute !important;right: 20px;" color="success" item-right [name]="isGroupShown(i) ? 'arrow-dropdown' : 'arrow-dropright'"></ion-icon>
        </ion-card-header>

        //content
        <ion-card-content *ngIf="isGroupShown(i)">
            {{qa.answer|removehtmltag}}
        </ion-card-content>
    </ion-card>

在你的 ts 中，

export class ClassName{

shownGroup = null;

 constructor(){}
 toggleGroup(group) {
       if (this.isGroupShown(group)) {
           this.shownGroup = null;
       } else {
           this.shownGroup = group;
       }
   };   

   isGroupShown(group) {
       return this.shownGroup === group;
   };
 }

【讨论】：

【解决方案2】：

这是一个使用纯 css 和 HTML 的简单解决方案
HTML

<input type="checkbox" id="post" />
<label for="post">
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit.Libero fuga facilis vel consectetur quos sapiente deleniti eveniet dolores tempore eos deserunt officia quis ab? Excepturi vero tempore minus beatae voluptatem!</div>
</label>

<p>The text above expends when you click on it. (checkbox and label used to achieve)</p>

CSS

input {
  display: none;
}
div {
  max-height: 1em;
  overflow: hidden;
}
input:checked ~ label div {
  font-size: inherit;
  max-height: 999em;
}

Demo on Codepen

【讨论】：

如果我在 html 中硬编码文本，一切正常，但我像这样在 ionic 中调用数据，它不起作用<input type="checkbox" id="post" /> <label for="post"> <div class="dd"> <p style="color: #9DA4AB;font-size: 15px;">{{list.TASKDESC}}</p> </div> </label>