我尝试在两个不同的列表中实现向下箭头和向上箭头,而其中一个列表中有子列表。我有两个无序列表,其中一个列表中有另一个ngFor在其子列表(嵌套列表)上运行。
<input (keyup)="keyDown($event)"/>
<div>
<h4>Filters Names</h4>
<ul>
<li *ngFor="let filter of filters; let i = index;" [class.activeSearchLink]="i === linkIndex">
{{filter.name}}
<div *ngFor="let subFilter of filter.subFilters">
{{subFilter.name}}
</div>
</li>
</ul>
<h4>Filters Values</h4>
<ul>
<li *ngFor="let value of filters.values; let i = index;"[class.activeSearchLink]="i=== linkIndex">
{{item.name}}
</li>
</ul>
</div>
代码:
keyDown(event) {
switch (event.keyCode) {
case 38:
this.linkIndex--;
break;
case 40:
this.linkIndex++;
break;
}
}
1条答案
按热度按时间tjrkku2a1#
这与"可访问性"有关,取决于你到底想要什么,你不需要一个特殊的javascript代码来处理它。
一些有用的链接:
What is current best practice for moving focus in an accessible menu (in html), tab or arrow keys?
Keyboard-navigable JavaScript widgets
How do I make div or li accessible through Up/down arrow keys
有这样一个例子:Navigation Menubar Example