垫手风琴角形-打开时隐藏其他-扩展面板角形材料

时间:2020-07-24 11:19:05

标签: angular angular-material accordion

我为我的网站创建了常见问题解答。

我有两个手风琴合二为一。这样会导致我从数据库中获取数据,并且主要主题和主要主题下的主题存在不同的表格。

第一手风琴:

<div class="container">
    <div class="row">
        <div class="col-12">
            <mat-accordion multi="false">
                <mat-expansion-panel hideToggle>
                    <mat-expansion-panel-header class="faq-question-header" (click)="plusminus=!plusminus">
                        <mat-panel-title>
                                <h6>{{ title }}</h6>
                        </mat-panel-title>
                        <div class="text-right" >
                            <img src="../../../../../assets/FAQ/plus.png" *ngIf="plusminus" alt="">
                            <img src="../../../../../assets/FAQ/minus.png" *ngIf="!plusminus" alt="">
                        </div>
                    </mat-expansion-panel-header>
                    <div class="faq-question-answer">
                        <p [innerHtml]='body' class="faq-question-answer"></p>
                    </div>
                </mat-expansion-panel>
            </mat-accordion>
        </div>
    </div>
</div>

第二手风琴:

<div class="container">
    <div class="row">
        <div class="col-12">
            <mat-accordion multi="false">
                <mat-expansion-panel hideToggle>
                    <mat-expansion-panel-header (click)="plusminus=!plusminus" >
                        <mat-panel-title>
                            <div class="test">
                                <h4>{{ titleText }}</h4>
                                
                            </div>
                            
                        </mat-panel-title>
                        <div class="text-right">
                            <img src="../../../../../assets/FAQ/pluswhite.png"  *ngIf="plusminus" alt="">
                            <img src="../../../../../assets/FAQ/minuswhite.png"  *ngIf="!plusminus" alt="">
                            </div>
                    </mat-expansion-panel-header>
                    <div class="faq-section-questions" *ngIf="questions && questions.length>0">
                        <div *ngFor="let question of questions" class="faq-question-area">
                            <app-faq-question [questionId]="question.id"></app-faq-question>
                        </div>
                    </div>
                </mat-expansion-panel>
            </mat-accordion>
        </div>
    </div>
</div>

和主要的html:

<div class="faq-art" *ngIf="blocks && blocks.length>0">
    <div *ngFor="let block of blocks" class="faq-block-area">
        <app-faq-section [blockId]="block.id"></app-faq-section>
    </div>
</div>

这是一个愚蠢的问题,但是当打开不同的手风琴时,我无法隐藏其他手风琴。 “多”比例在这里不起作用...我应该从手风琴手风琴改为其他东西吗?

0 个答案:

没有答案