如何在 ng-bootstrap 打开另一个面板时关闭其他面板

Question

我想关闭边栏中除我单击的面板之外的所有折叠面板。我正在尝试使用 ng-bootstrap 折叠面板实现此行为。

示例代码：

<ul class="sidebar">
    <li class="nav-item">
        <a class="nav-link" (click)="isCollapsed = !isCollapsed" [attr.aria-expanded]="!isCollapsed" aria-controls="collapse_1">Collapse1</a>
        <div class="collapse" id="collapse_1" [ngbCollapse]="isCollapsed">
            <ul class="nav">
                <li class="nav-item">
                    <a class="nav-link">Accordion</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link">Buttons</a>
                </li>
            </ul>
        </div>
    </li>
    <li class="nav-item">
        <a class="nav-link" (click)="isCollapsed = !isCollapsed" [attr.aria-expanded]="!isCollapsed" aria-controls="collapse_2">Collapse2</a>
        <div class="collapse" id="collapse_2" [ngbCollapse]="isCollapsed">
            <ul class="nav">
                <li class="nav-item">
                    <a class="nav-link">Accordion</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link">Buttons</a>
                </li>
            </ul>
        </div>
    </li>
</ul>

Answer 1

修正你的模型。布尔值 isCollapsed 不可能告诉您 N 个面板中的哪个 已扩展。

用 expandedPanelId 之类的变量替换该布尔值，其中包含...展开的面板的 ID。

将您的 !isCollapsed 条件替换为 expandedPanelId === 'collapse_2'；并用 expandedPanelId = 'collapse_2'.

之类的东西替换您的点击处理程序

Answer 2

你的情况最好选择Accordion。参见 One open panel at a time

如何在 ng-bootstrap 打开另一个面板时关闭其他面板

How to close other panels when another one is opened in ng-bootstrap

typescript

ng-bootstrap

angular