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的孩子，将他们粘贴到一个数组中并通过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");
}

您可以看到 working example here

Answer 2

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

http://vebersol.net/demos/jquery-custom-forms/

http://www.dreamcss.com/2009/05/15-jquery-plugins-to-enhance-your-html.html

Answer 3

现实你不需要任何js用于下拉，但你可以使用JavaScript Event来模拟它。您可以使用悬停，关注， onclick

等活动

在JS中你可以使用This For Set Event

  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
  }

活动清单

http://www.quirksmode.org/dom/events/index.html

Answer 4

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

在Code

中看起来像这样

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

以JSFiddle

为例

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

4 个答案: