我如何使用Javascript在按键下模拟悬停？

首先，我只想使用本机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>

是的，确实没有堕落的行为，但实际上这不是讨论的重点。问题是，我想不出一个合适的方法来为这个下拉菜单启用键盘控制。预期结果如下：我按下向下键，第一个选项高亮显示；我再次按下它，第二个选项高亮显示，依此类推

在这一点上，我看到的唯一选择（刚刚开始学习JS）是获取

ul

的所有子项，将它们粘贴到一个数组中，并在按下向下键时通过JS方法以适当的方式为标签分配背景色

---

另一方面，我仍然有CSS for mouse countrol中描述的：hover行为。有没有一种模拟悬停的智能方法？

您可能希望使用库，而不是从头开始编写代码

---

事实上，下拉列表不需要任何js，但可以使用JavaScript事件来模拟它。您可以使用类似于悬停、聚焦、点击

在JS中，您可以将其用于Set事件

  document.getElementById('id').addEventListener('focus',function(e){
    //place code that want ran at event happened
  }  

在JQuery中，您可以使用绑定，单击

  $('#id')bind('focus',function(e){
    //place code that want ran at event happened
  }

活动清单

---

我会在您的li元素上分配一个简单的类，并使用键控处理程序控制它。下面的代码并不意味着完整，而是提供了一些您可以使用的东西

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");
}

---

您可以看到一个

我建议从css中删除悬停属性。 并只添加一个应用于按键和鼠标悬停的类

这在代码中可能是这样的

var dropDown = document.getElementsByClassName("dropdownItemContainer")[0]

document.addEventListener("keydown",function (e) {
    if(e.keyCode == 38 || e.keyCode == 40 ) {
        var key = e.keyCode
        var hovered = dropDown.getElementsByClassName("hovered")
        if(hovered.length != 0 ) {
            cur = hovered[0]
            cur.className = ""
            cur = cur[(key==38?"previous":"next")+"ElementSibling"] || dropDown.children[key==38?dropDown.children.length-1:0] 
        } else {
            cur = dropDown.children[key==38?dropDown.children.length-1:0]
        }
        cur.className="hovered"
    }
});


dropDown.addEventListener("mouseover",function (e) {
    for( var i = 0,j; j = dropDown.getElementsByClassName("hovered")[i];i++)
        j.className = "";
    e.srcElement.className = "hovered";
});

---

下面是一个关于

键盘导航大量使用

：focus

@AlessandroVendruscolo true的示例，但除了常规控件元素或常规控件元素之外，我无法真正关注任何内容，对吗？：）我只想到jQuery解决方案：（添加

tabindex

属性，或者在

li

s中放置锚-请参阅基于tabindex的@AlessandroVendruscolo焦点事件不是很可靠。例如

：focus

伪类在某些浏览器中不会触发。感谢您的回答，但是，正如我提到的，我正在尝试研究原生JS，所以我实际上想要c。）我知道JQuery提供了很多可能性和定制选项，我承认它们很酷也很有用，但我最终还是会谈到：）-给你。我在facebook上写给你了，我想我需要给你更多的背景资料。@Christoph是的，我们可以很好地使用focus事件，focus元素受支持的事实不会改变默认情况下只有

窗口、链接和表单字段可以聚焦的事实。你需要在元素上声明
tabindex
erwise，即使是这样，focus也得到了不一致的支持。谢谢你们的时间，伙计们。非常感谢你们的解决方案，我在同一个问题上挣扎了很长时间。
var dropDown = document.getElementsByClassName("dropdownItemContainer")[0]

document.addEventListener("keydown",function (e) {
    if(e.keyCode == 38 || e.keyCode == 40 ) {
        var key = e.keyCode
        var hovered = dropDown.getElementsByClassName("hovered")
        if(hovered.length != 0 ) {
            cur = hovered[0]
            cur.className = ""
            cur = cur[(key==38?"previous":"next")+"ElementSibling"] || dropDown.children[key==38?dropDown.children.length-1:0] 
        } else {
            cur = dropDown.children[key==38?dropDown.children.length-1:0]
        }
        cur.className="hovered"
    }
});


dropDown.addEventListener("mouseover",function (e) {
    for( var i = 0,j; j = dropDown.getElementsByClassName("hovered")[i];i++)
        j.className = "";
    e.srcElement.className = "hovered";
});