html - 2 Accordion A 和 B 需要 Accordion A 第一类也打开 Accordion B 第一类，反之亦然

Question

您好，这是我的第一个问题，英语不是我的母语，如果我犯了一些错误，请见谅。
我在我的项目中使用 Angular 6、jQuery 和 BS。
我有两个 Accordion ，每个都有不同的类别。我们将它们命名为 A1 和 A2。
当我单击 A1 时，我希望 A2 也打开/关闭，当我单击 A2 时也是如此。有什么办法吗？
我为此尝试了jQuery，但我得到了一个无限循环

$('.A1').on('click', async function() {
        await $(".A2").click();
    });

$('.A2').on('click', async function() {
        await $(".A1").click();
    });

Picture
提前感谢任何可以回答这个问题的人

Answer 1

您可以调用 toggle Accordion 扩展面板上的方法。给每个扩展面板一个 id 并在其上调用 toggle。
这里是 Working Demo

<mat-accordion >
<!-- #docregion basic-panel -->
<!-- #docregion hide-toggle -->
  <mat-expansion-panel hideToggle #first (click)="second.toggle()">
<!-- #enddocregion hide-toggle -->
    <mat-expansion-panel-header>
      <mat-panel-title>
       This is the first Expansion panel
      </mat-panel-title>
      <mat-panel-description>
        First Content
      </mat-panel-description>
    </mat-expansion-panel-header>
    <p>First Content</p>
  </mat-expansion-panel>
<!-- #enddocregion basic-panel -->
 
</mat-accordion>
<br/>

<mat-accordion>
<!-- #docregion basic-panel -->
<!-- #docregion hide-toggle -->
  <mat-expansion-panel #second hideToggle (click)="first.toggle()"> 
<!-- #enddocregion hide-toggle -->
    <mat-expansion-panel-header>
      <mat-panel-title>
       This is the second Expansion panel
      </mat-panel-title>
      <mat-panel-description>
        Second Content
      </mat-panel-description>
    </mat-expansion-panel-header>
    <p> Second Content</p>
  </mat-expansion-panel>
<!-- #enddocregion basic-panel -->
 
</mat-accordion>