如何使用单个按钮同时隐藏一个折叠并打开另一个折叠？答案

【问题标题】：How to hide one collapse and open another collapse at same time using sigle button?如何使用单个按钮同时隐藏一个折叠并打开另一个折叠？
【发布时间】：2021-10-11 20:09:55
【问题描述】：

我正在尝试添加折叠。下面是我的代码。

<div class="row">
    <div class="col-md-2">
       
            <ul ngbNav #nav="ngbNav" [(activeId)]="active" class="nav-pills" orientation="vertical">
              <li ngbNavItem="a">
                <a ngbNavLink (click)="collapsea.toggle()" [attr.aria-expanded]="!isaCollapsed">A</a>
              </li>
              <li ngbNavItem="b">
                <a ngbNavLink (click)="collapseb.toggle()" [attr.aria-expanded]="isbCollapsed">B</a>
              </li>
              <li ngbNavItem="c">
                <a ngbNavLink (click)="collapsec.toggle()" [attr.aria-expanded]="iscCollapsed">C</a>
              </li>
            </ul>
          
    </div>
    <div class="col-md-10 bg-success">
    
      <div #collapsea="ngbCollapse" [(ngbCollapse)]="isaCollapsed">
       <!-- Content -->
      </div>

      <div #collapseb="ngbCollapse" [(ngbCollapse)]="isbCollapsed">
            <!-- Content -->
      </div>
    
    <div #collapsec="ngbCollapse" [(ngbCollapse)]="iscCollapsed">
      
            <!-- Content -->
    </div>

    
    </div>

这是我的 ts 文件。

export class collapseeComponent implements OnInit {
  public isaCollapsed = false;
  public isbCollapsed = true;
  public iscCollapsed = true;
  
  active = 'A';

  constructor() { }

  ngOnInit(): void {
  }


}

当我运行代码时，崩溃出现了。但是当我点击第二个按钮 B 时，与之关联的折叠会附加到第一个折叠上。我希望当我点击 B 时第一个折叠 A 消失，同样，当我点击 C 时 B 应该消失。

【问题讨论】：

标签： angular bootstrap-4 collapse

【解决方案1】：

您可以使用 (click) 事件调用您的打字稿函数。在这些函数中，您可以执行多个命令（严格来说，您还可以在 html 中使用分号分隔多个调用，尽管它很快就会变得混乱。

所以你可以这样做：

<a ngbNavLink (click)="collapsea.toggle(); collapseb.toggle()"...>

我个人更喜欢函数调用

<a ngbNavLink (click)="toggle()">

public toggle(): void {
    this.collapsea != this.collapsea;
    this.collapseb != this.collapseb;
}

此 ngbCollapse 绑定到 isaCollapsed 布尔值，因此您也可以通过设置直接影响这些：

this.isaCollapsed != this.isaCollapsed

然后可能需要通过注入的 ChangeDetectorRef.detectChanges() 运行 changeDetection，但我对此表示怀疑。

【讨论】：