Javascript 在自定义下拉列表5中使用箭头导航？

我有自定义下拉列表。差不多。我想在带有箭头的下拉列表中导航，并通过按enter键或单击来选择项目。

---

当您浏览下拉列表中的每个项目时，应将其悬停。我怎么能做到？谢谢。

步骤1：您应该跟踪鼠标当前悬停的元素，并将其索引存储在组件中。（可选，否则使用键时从第一项开始）

步骤2：为组件中的keyup事件创建一个监听器，该监听器增加或减少箭头键上的跟踪索引。该索引应该在您使用的项的限制范围内：而不是数组的<0或>长度。您可以使用

event.keyCode

检查按下哪个键。如果元素不在焦点中，则不应处理该方法

@HostListener('window:keyup', ['$event'])
keyEventDown(event: KeyboardEvent) {
   [..]
}

第三步。当按下某个键时，删除指向项目的悬停效果，并将样式应用于当前选定的索引。悬停效果可以通过

document.body.style.pointerEvents='none'删除

如果鼠标移动，应将该效果设置回

auto

。为此，您可以为mousemove事件使用另一个侦听器

第四步。在按键事件中，检查是否按了回车键，并将当前选定的索引设置为结果值

---

这是一条你可以走的路。

@SharmaVikram谢谢你的链接。但现有的下拉组件中没有一个不符合设计要求。所以我被迫发明了自行车请解释更多或显示您现有的代码，然后我将实现