Question

我刚刚开始使用Angular 2和Bootstrap 4.我使用Bootstrap中的card类创建了关于页面的信息。当您单击卡片时，当您再次单击其卷起时，它会向下滚动。我想实现代码，所以当我点击下一张卡时，会自动卷起，所以我总是打开一张卡片。

以下是HTML文件的一部分：

INotifyCollectionChanged

这是我的TS文件：

    <div class="card">
            <div class="card-header" (click)="toggleShowSystemRequirements()">
              <h4>
                System Requirements
                <span class="pull-right" *ngIf="!showSystemRequirements"><i class="fa fa-chevron-down"></i></span>
                <span class="pull-right" *ngIf="showSystemRequirements"><i class="fa fa-chevron-up"></i></span>
              </h4>
            </div>
            <div *ngIf="showSystemRequirements" class="card-block">
              <p>Software will operate on the following computers:</p>
              <ul>
                <li>
                  64-bit or 32-bit computer running Windows OS
                </li>
                <li>
                  64-bit or 32-bit computer running Linux OS
                </li>
                <li>
                  Mac OS X
                </li>
              </ul>
            </div>
          </div>
<div class="card">
        <div class="card-header" (click)="toggleShowPSAT()">
         <h4>
              PSAT
           <span class="pull-right" *ngIf="!showPSAT"><i class="fa fa-chevron-down"></i></span>
           <span class="pull-right" *ngIf="showPSAT"><i class="fa fa-chevron-up"></i></span>
          </h4>
        </div>
        <div *ngIf="showPSAT" class="card-block">
            <p>

            </p>

            <h4>Intended Users</h4>
            <p>

            </p>

            <h4>Inputs</h4>
            <p></p>
            <ul>
              <li>P</li>
              <li>System</li>
              <li>Number</li>
            </ul>

            <h4>Outputs</h4>
            <p>Base</p>
            <ul>

              <li>Optimization 
              </li>
            </ul>
          </div>
        </div>

Answer 1

你可以通过几种方式实现你的要求

添加新的clearAll函数，它只会将您的标志重置为false并在您的所有卡片中单击函数调用该函数

{{1}}

在Angular 2 / Bootstrap中自动卷起卡片

1 个答案: