如何在keydown上使用Javascript模拟悬停？

Question

首先,我想只使用本机JavaScript来完成这项任务.

假设我要制作自定义下拉列表,HTML代码看起来就像这样.

<div class="dropdown">
  <span class="dropdown-label" style="display:block">Select a thing</span>
  <ul class="dropdownItemContainer">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
  </ul>
</div>

在CSS文件中,我有一些接近这个:

ul.dropdownItemContainer li:hover {
  background-color: #FF0000;
}

是的,确实没有丢弃行为,但实际上并不是讨论的重点.问题是我想不出一个合适的方法来为这个下拉列表启用键盘控制.所需的结果如下:我按下向下键,第一个选项突出显示; 我再次按下它,第二个选项突出显示,依此类推.

我在这一点上看到的唯一选项(刚刚开始研究JS)就是将所有ul的孩子,stick'em带到一个数组中,并且只要向下键是正确的,就可以通过JS方法为标签指定背景颜色.按下.

另一方面,我仍然有CSS中描述的用于鼠标控制的悬停行为.有一种模拟悬停的聪明方法吗？

Answer 1

我会在你的li元素上简单地分配一个类,并用一个keydown处理程序引导它.以下代码并不是完整的,而是为您提供可以使用的代码.

var active = document.querySelector(".hover") || document.querySelector(".dropdownItemContainer li");

document.addEventListener("keydown",handler);
document.addEventListener("mouseover",handler);

function handler(e){
    console.log(e.which);
        active.classList.remove("hover");
    if (e.which == 40){
        active = active.nextElementSibling || active;
    }else if (e.which == 38){      
        active = active.previousElementSibling || active;
    }else{
        active = e.target;
    }
        active.classList.add("hover");
}

你可以在这里看到一个有效的例子