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

修复您的模型。布尔值<span class="" routerLink ="/some_path" routerLinkActive="class_Name">Value</span></a>可能无法告诉您 N个面板中的哪个已展开。

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

用expandedPanelId之类的东西来代替您的!isCollapsed条件；并将您的点击处理程序替换为expandedPanelId === 'collapse_2'。

Answer 2

对于您而言，最好选择Accordion。参见One open panel at a time

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

2 个答案: