如何使用单个按钮同时关闭一个ngbCollapse折叠面板并打开另一个

实现思路 #

你当前的代码中三个折叠面板的状态是独立维护的，切换时不会互相影响，因此会出现多个面板同时展开的情况。可以通过以下两种方案实现「同一时间仅展示一个面板」的手风琴效果：

方案1：复用ngbNav的activeId实现联动（更简洁） #

你已经给ngbNav绑定了[(activeId)]属性，可以直接用这个全局状态控制所有折叠面板的显隐，不需要单独维护三个独立的折叠状态变量。

修改TS代码 #

export class collapseeComponent implements OnInit {
  // 注意和ngbNavItem的id大小写保持一致，修改为小写a
  active = 'a';

  constructor() { }

  ngOnInit(): void {
  }
}

修改HTML代码 #

把每个折叠面板的ngbCollapse直接绑定为「当前activeId不等于对应面板id」，也可以去掉原有的单个点击toggle事件，直接用ngbNav自带的切换逻辑即可：

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

这个方案不需要额外写点击事件处理，自动和导航选中状态联动，天然保证同一时间只有一个面板展开。

方案2：保留原有toggle逻辑，添加关闭其他面板的处理 #

如果你不想改动现有结构，可以新增统一的切换方法，每次点击时先关闭所有面板，再展开当前选中的面板：

修改TS代码 #

新增togglePanel方法：

export class collapseeComponent implements OnInit {
  public isaCollapsed = false;
  public isbCollapsed = true;
  public iscCollapsed = true;
  // 统一大小写，和ngbNavItem保持一致
  active = 'a';

  constructor() { }

  ngOnInit(): void {
  }

  togglePanel(panel: 'a'|'b'|'c') {
    // 先将所有面板设为关闭状态
    this.isaCollapsed = true;
    this.isbCollapsed = true;
    this.iscCollapsed = true;
    // 展开当前选中的面板
    switch(panel) {
      case 'a': 
        this.isaCollapsed = false;
        this.active = 'a';
        break;
      case 'b': 
        this.isbCollapsed = false;
        this.active = 'b';
        break;
      case 'c': 
        this.iscCollapsed = false;
        this.active = 'c';
        break;
    }
  }
}

修改HTML代码 #

把原来的单个toggle事件替换为调用统一的切换方法：

<ul ngbNav #nav="ngbNav" [(activeId)]="active" class="nav-pills" orientation="vertical">
  <li ngbNavItem="a">
    <a ngbNavLink (click)="togglePanel('a')" [attr.aria-expanded]="!isaCollapsed">A</a>
  </li>
  <li ngbNavItem="b">
    <a ngbNavLink (click)="togglePanel('b')" [attr.aria-expanded]="!isbCollapsed">B</a>
  </li>
  <li ngbNavItem="c">
    <a ngbNavLink (click)="togglePanel('c')" [attr.aria-expanded]="!iscCollapsed">C</a>
  </li>
</ul>

注意事项 #

• 原代码中active初始值为大写'A'，和ngbNavItem的小写'a'不匹配，需要统一大小写，否则初始导航选中状态会失效
• 原代码中B、C面板的aria-expanded属性值写反了，展开状态应该对应!isbCollapsed而非isbCollapsed，修正后可保证无障碍属性正确

内容的提问来源于stack exchange，提问作者An student