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

Question

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

<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 时，与其关联的折叠会附加到第一个折叠上。我想让第一个折叠的A在点击B的时候消失，同理，点击C的时候B也应该消失

Answer 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，但我对此表示怀疑。

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

How to hide one collapse and open another collapse at same time using sigle button?

collapse

bootstrap-4

angular