Мое меню выглядит так:
Auth Management
- Local User
- Assign Role
Loggers
- Log Levels
Integrations
- Providers
Моя HTML-страница выглядит так:
<clr-vertical-nav>
<clr-vertical-nav-group routerLinkActive="active">
<clr-icon shape="user" clrVerticalNavIcon></clr-icon>Auth Management
<clr-vertical-nav-group-children *clrIfExpanded="true">
<a clrVerticalNavLink [routerLink]="['local']" routerLinkActive="active">Local User</a>
<a clrVerticalNavLink [routerLink]="['users']" routerLinkActive="active">Assign Role</a>
</clr-vertical-nav-group-children>
</clr-vertical-nav-group>
<clr-vertical-nav-group routerLinkActive="active">
<clr-icon shape="filter-grid-circle" clrVerticalNavIcon></clr-icon>Loggers
<clr-vertical-nav-group-children *clrIfExpanded="false">
<a clrVerticalNavLink [routerLink]="['log-levels']" routerLinkActive="active">Log Levels</a>
</clr-vertical-nav-group-children>
</clr-vertical-nav-group>
<clr-vertical-nav-group routerLinkActive="active">
<clr-icon shape="line-chart" clrVerticalNavIcon></clr-icon>Integrations
<clr-vertical-nav-group-children *clrIfExpanded="false">
<a clrVerticalNavLink [routerLink]="['integration']" routerLinkActive="active">Providers</a>
</clr-vertical-nav-group-children>
</clr-vertical-nav-group>
</clr-vertical-nav>
При запуске страницы я получаю "Auth Management"
открытыми и другими закрытыми, так как я устанавливаю *clrIfExpanded
значений.
Я пытаюсь реализовать свертывание одного меню при нажатии другого заголовка меню.
Например, если я нажимаю "Loggers"
, "Auth Management" and "Integrations"
должен быть свернут / не развернут.
или, если я нажму "Integrations"
, "Loggers" and "Auth Management"
должен быть свернут / не развернут.
Я попытался установить значение *clrIfExpanded
в классе компонентов на (click)
в заголовке меню, но я не достиг этой функции.
Как я могу этого добиться. Заранее спасибо!