Question

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

我的项目使用的是 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

先感谢能回答这个问题的人

Answer 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>

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

1 个答案: