Question

我正在使用Angular版本7。我有2个列的6个按钮。我想显示同一div中的按钮之一的描述。我已经实现了在任何按钮中单击时都会显示所有文本。我该如何更改？

代码如下：

status: boolean = true;
  showDescription() {
    this.status = !this.status;
  }
}

.shown {
    opacity: 1 !important;
    transition: .5s ease;
}

.item__description {
                opacity: 0;
                transition: .5s ease;
                h4 {
                    font-size: 30px;
                    margin: 0 20px;
                }
                p {
                    color: #ffffff;
                    margin: 0 20px;
                }
            }

<div class="content__left">
            <div class="content__item">
                <button (click)="showDescription()"><i class="fas fa-money-check-alt"></i></button>
                <div class="item__description" [ngClass]="status ? '' : 'shown'">
                    <h4>NAJLEPSZE CENY W REGIONIE</h4>
                    <p>Najwyższe ceny skupu złomu stalowego na Podlasiu</p>
                </div>
            </div>
            <div class=" content__item ">
                <button (click)="showDescription()"><i class="fas fa-dolly "></i></button>
                <div class="item__description" [ngClass]="status ? '' : 'shown'">
                    <h4>TRANSPORT</h4>
                    <p>Posiadamy własną flotę pojazdów</p>
                </div>
            </div>
            <div class="content__item ">
                <button (click)="showDescription()"><i class="fas fa-hand-holding "></i></button>
                <div class="item__description" [ngClass]="status ? '' : 'shown'">
                    <h4>KONTROLA ŁADUNKU</h4>
                    <p>Kontrolujemy cały proces załadunku i rozładunku</p>
                </div>
            </div>
        </div>

Answer 1

在您发表评论后，在我看来您可能想要代替它。

showMoneyCheckDescription = false;
showDollyDescription = false;
showHandHoldingDescription = false;

.shown {
    opacity: 1 !important;
    transition: .5s ease;
}

.item__description {
                opacity: 0;
                transition: .5s ease;
                h4 {
                    font-size: 30px;
                    margin: 0 20px;
                }
                p {
                    color: #ffffff;
                    margin: 0 20px;
                }
            }

<div class="content__left">
            <div class="content__item">
                <button (click)="showMoneyCheckDescription = !showMoneyCheckDescription "><i class="fas fa-money-check-alt"></i></button>
                <div class="item__description" [ngClass]="showMoneyCheckDescription ? '' : 'shown'">
                    <h4>NAJLEPSZE CENY W REGIONIE</h4>
                    <p>Najwyższe ceny skupu złomu stalowego na Podlasiu</p>
                </div>
            </div>
            <div class=" content__item ">
                <button (click)="showDollyDescription = !showDollyDescription"><i class="fas fa-dolly "></i></button>
                <div class="item__description" [ngClass]="showDollyDescription ? '' : 'shown'">
                    <h4>TRANSPORT</h4>
                    <p>Posiadamy własną flotę pojazdów</p>
                </div>
            </div>
            <div class="content__item ">
                <button (click)="showHandHoldingDescription = !showHandHoldingDescription "><i class="fas fa-hand-holding "></i></button>
                <div class="item__description" [ngClass]="showHandHoldingDescription ? '' : 'shown'">
                    <h4>KONTROLA ŁADUNKU</h4>
                    <p>Kontrolujemy cały proces załadunku i rozładunku</p>
                </div>
            </div>
        </div>

原始答案

尝试类似的方法，在这里您将不使用布尔型的flip变量，而是使用一个命名项来指示要显示哪个部分的描述。

itemToShow: string;
  showDescription(itemName: string) {
    if (this.itemToShow === itemName) {
        // if item that is showing was clicked again, then deselect
        this.itemToShow = null; // deselect
    } else {
        this.itemToShow = itemName; // select
    }
}

.shown {
    opacity: 1 !important;
    transition: .5s ease;
}

.item__description {
                opacity: 0;
                transition: .5s ease;
                h4 {
                    font-size: 30px;
                    margin: 0 20px;
                }
                p {
                    color: #ffffff;
                    margin: 0 20px;
                }
            }

<div class="content__left">
            <div class="content__item">
                <button (click)="showDescription('money-check')"><i class="fas fa-money-check-alt"></i></button>
                <div class="item__description" [ngClass]="itemToShow === 'money-check' ? '' : 'shown'">
                    <h4>NAJLEPSZE CENY W REGIONIE</h4>
                    <p>Najwyższe ceny skupu złomu stalowego na Podlasiu</p>
                </div>
            </div>
            <div class=" content__item ">
                <button (click)="showDescription('dolly')"><i class="fas fa-dolly "></i></button>
                <div class="item__description" [ngClass]="itemToShow === 'dolly' ? '' : 'shown'">
                    <h4>TRANSPORT</h4>
                    <p>Posiadamy własną flotę pojazdów</p>
                </div>
            </div>
            <div class="content__item ">
                <button (click)="showDescription('hand-holding')"><i class="fas fa-hand-holding "></i></button>
                <div class="item__description" [ngClass]="itemToShow === 'hand-holding'? '' : 'shown'">
                    <h4>KONTROLA ŁADUNKU</h4>
                    <p>Kontrolujemy cały proces załadunku i rozładunku</p>
                </div>
            </div>
        </div>

Answer 2

我建议您创建一个“手风琴”组件，该组件具有所需的行为。

@Component({
  selector: 'ng-accordion',
  template: `
     <div class="content__item ">
        <button (click)="showDescription()">
                  <i class="fas fa-hand-holding "></i>
        </button>
        <div class="item__description" [ngClass]="status ? '' : 'shown'">
           <ng-content></ng-content>
        </div>
     </div>
  `
})
export class AccordionComponent {
  public status = false;

  showDescription() {
    this.status = !this.status;
  }
}

在您可以像这样使用之后：

<ng-accordion>
  <h4>KONTROLA ŁADUNKU</h4>
  <p>Kontrolujemy cały proces załadunku i rozładunku</p>
</ng-accordion>
<ng-accordion>
  <h4>TRANSPORT</h4>
  <p>Posiadamy własną flotę pojazdów</p>
</ng-accordion>

显示具有多个对象的点击的描述

2 个答案:

原始答案