如何模拟与键盘事件悬停

我有以下HTML模板，其中列表项目动态添加到下拉列表中。如何模拟与键盘事件悬停

<button class="btn btn-default btn-sm dropdown" (keydown)="triggerTraverse($event)"></button> 
    <fa-list-filler> 
     <li *ngFor="let item of items [class.active]="checkItem(item,selectedItem)"> 
      <span (click)="doNavigate()" class="cookie"></span> 
     </li> 
    </fa-list-filler>

我有一个列表项下悬停风格：

li > .cookie { 
     cursor: pointer; 
     &:hover{ 
      background-color: 'yellow'; 
     } 
    }

当我将鼠标悬停我的鼠标这些列表中的项目，我可以看到应用到列表项即我可以悬停风格在这种情况下请参阅黄色背景颜色。

默认情况下，第一项被选中，即它有活跃的类。然后，当用户按下向下箭头键时，活动类保持在相同的位置，但悬停状态应该向下移动到下一个列表项，并且移到下一个项目上，并且应该环绕。

我实现了下面的方法，但是我无法正确地继续使用后面的元素。

triggerTraverse(evt: KeyboardEvent){ 
    if(evt.keyCode === 27){ 
    closeDropdown(); 
}else if(evt.keyCode === 40){ 
    let initialEle = document.querySelector('li.active'); 
initialEle.nextElementSibling.firstElementChild.classList.add('hoverstyle'); 
} 
}

hoverstyle是我刚刚实施的的backgroundColor添加到元素的另一个类。

.hoverstyle{ 
background-color: 'pink'; 
}

任何人都可以请帮忙。

来源

2017-02-23 zelda

你看到hoverstyle'添加到'里的类' '在检查部分？ – Searching

是的。但这仅仅发生在第二个元素上，因为我没有进一步遍历整个列表。 – zelda

Kul，回答这个问题，如果逻辑从'li.active'（你的第一个元素）开始，然后向下移动，它会实际上超出第二个元素吗？ – Searching

跟踪选定的索引并使用ngClass指令。

例如：

模板：

<input ... (keydown)="onKeydown($event)"> 
<div *ngFor="let option of options; let i = index;" 
    (mouseover)="highlight(i)" 
    [ngClass]="{'selected': i === selectedIndex}"> 
    <span>{{ option }}</span> 
</div>

组件：

selectedIndex = 0 

... 

highlight(i: number) { 
    this.selectedIndex = i; 
} 

onKeydown(event: KeyboardEvent) { 
    if (event.code === 'ArrowUp' && this.selectedIndex > 0) { 
     event.preventDefault(); 
     this.selectedIndex--; 
    } else if (event.code === 'ArrowDown' && this.selectedIndex < (this.options.length - 1)) { 
     event.preventDefault(); 
     this.selectedIndex++; 
    } 
}

CSS：

.selected { 
    background-color: red; 
}

来源

2017-02-23 04:32:00 shusson

非常感谢:) – zelda

虽然我遇到了一个问题，当下拉列表中有很多元素时，当我用向下或向上箭头遍历列表时，元素不会进入视图。我怎样才能做到这一点？任何提示？ – zelda

如何模拟与键盘事件悬停

回答

相关问题