2 手风琴 A 和 B 需要手风琴 A 第一类也打开手风琴 B 第一类，反之亦然答案

【问题标题】：2 accordion A and B need accordion A first category to also open accordion B first category and viceversa2 手风琴 A 和 B 需要手风琴 A 第一类也打开手风琴 B 第一类，反之亦然
【发布时间】：2021-05-17 23:57:42
【问题描述】：

您好，这是我的第一个问题，英语不是我的母语，如果我犯了一些错误，请见谅。

我在我的项目中使用 Angular 6、jQuery 和 BS。

我有两个手风琴，每个都有不同的类别。我们将它们命名为 A1 和 A2。

当我单击 A1 时，我希望 A2 也打开/关闭，当我单击 A2 时也是如此。有什么办法吗？

我为此尝试了 jQuery，但我得到了一个无限循环

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

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

Picture

提前感谢任何可以回答此问题的人

【问题讨论】：

标签： html jquery angular bootstrap-4

【解决方案1】：

您可以通过调用手风琴扩展面板上的toggle 方法来完成此操作。为每个扩展面板指定一个 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>

【讨论】：

感谢您的评论！它对我有用。