Question

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

以下是我的HTML代码：

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

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

Answer 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;
   };
 }

Answer 2

这是一个使用Pure 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

Div on click会扩展但不会再次点击合同

2 个答案: