Как закрыть другие панели, когда другая открывается в 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

Для вашего случая лучше выбрать Аккордеон .См. Одна открытая панель за раз

Answer 2

Исправьте вашу модель.Логическое значение isCollapsed не может сказать вам , какие из N панелей расширены.

Замените это логическое значение на переменную типа expandedPanelId, которая содержит ... идентификатор развернутой панели.

Замените ваши !isCollapsed условия на что-то вроде expandedPanelId === 'collapse_2';и замените ваши обработчики кликов на что-то вроде expandedPanelId = 'collapse_2'.