首先,我只想使用 native 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
的子级,将它们粘贴到一个数组中并通过每当按下向下键时,JS 方法以正确的方式进行。
另一方面,我仍然有鼠标控制的 CSS 中描述的 :hover 行为。有模拟悬停的智能方法吗?
最佳答案
我会在您的 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");
}
你可以看到一个 working example here
关于javascript - 如何在 keydown 上使用 Javascript 模拟悬停?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14747493/