我正在使用metismenu和ng-bootstrap与Angular 4.我面临的问题是aria-expanded设置不正确。
以下是我在Angular中的代码。
<ul class="nav metismenu" id="side-menu">
<ng-template [ngIf]="user.haveAccess('menu1')">
<li [ngClass]="{'active': !isCollapsed}">
<a (click)="onCollapsed()" [attr.aria-expanded]="!isCollapsed">Menu1</a>
<ul class="nav nav-second-level" [ngbCollapse]="isCollapsed" [attr.aria-expanded]="!isCollapsed">
<li><a href="#">SubMenu1</a></li>
<li><a href="#">SubMenu2</a></li>
<li><a href="#">SubMenu3</a></li>
</ul>
</li>
</ng-template>
</ul>
以下是第一次加载页面时的html,正如预期的那样。
<ul class="nav metismenu" id="side-menu">
<li _ngcontent-c2="" ng-reflect-ng-class="[object Object]">
<a _ngcontent-c2="" aria-expanded="false">Menu1</a>
<ul _ngcontent-c2="" class="nav nav-second-level collapse" ng-reflect-collapsed="true" aria-expanded="false">
<li _ngcontent-c2=""><a _ngcontent-c2="" href="#">SubMenu1</a></li>
<li _ngcontent-c2=""><a _ngcontent-c2="" href="#">SubMenu2</a></li>
<li _ngcontent-c2=""><a _ngcontent-c2="" href="#">SubMenu3</a></li>
</ul>
</li>
</ul>
但是当我点击Menu1时,菜单会扩展。该页面变得如下。为什么<a _ngcontent-c2="" aria-expanded="false">Menu1</a>
确实变为真?
<ul class="nav metismenu" id="side-menu">
<li _ngcontent-c2="" ng-reflect-ng-class="[object Object]" class="active">
<a _ngcontent-c2="" aria-expanded="false">Menu1</a>
<ul _ngcontent-c2="" class="nav nav-second-level collapse show" ng-reflect-collapsed="false" aria-expanded="true">
<li _ngcontent-c2=""><a _ngcontent-c2="" href="#">SubMenu1</a></li>
<li _ngcontent-c2=""><a _ngcontent-c2="" href="#">SubMenu2</a></li>
<li _ngcontent-c2=""><a _ngcontent-c2="" href="#">SubMenu3</a></li>
</ul>
</li>
</ul>
我觉得metismenu和ng-bootstrap试图同时更新aria扩展。这是metismenu中的问题还是我在代码中遗漏的任何内容?
请参见下面的截图
加载页面时。
首次点击Menu1时,菜单已展开,但aria-expanded未更改为true <a _ngcontent-c2="" aria-expanded="false">Menu1</a>
。
当第二次点击Menu1时,菜单崩溃并且扩展得非常快。
当第三次单击Menu1时,菜单无法折叠但css已折叠。