2022-05-02 用css实现下拉菜单的鼠标选中和上下键选中

要求&思路:

1.ul默认隐藏,当input获得焦点时显示,失去焦点时隐藏
2.给li设置鼠标移入事件
3.lisObj是伪数组,通过Array.from()方法转化为真数组并遍历,获得当前鼠标移入对应的当前li的索引
4.将当前li的内容显示到input中
5.给input设置键盘按下事件,判断为上下键的的键码时通过index的自增自减上下选择
5.index设置最值以免报错
6.eve.which监听键盘输入:针对键盘和鼠标事件，这个属性能确定你到底按的是哪个键或按钮

代码:(样式不用看)

<style type="text/css">
    * {
     
        margin: 0;
        padding: 0;
        list-style: none;
    }
    
    #cont {
     
        width: 300px;
        margin: 40px auto;
    }
    
    input {
     
        width: 296px;
        height: 40px;
    }
    
    ul {
     
        background: #eee;
        display: none;
    }
    
    ul li {
     
        line-height: 30px;
        text-indent: 20px;
        border-bottom: solid 1px black;
    }
    /* 让选中的li变色 */
    ul li.active {
     
        background: #ccc;
    }