js模拟下拉菜单-键盘、鼠标（代码详解）

最新推荐文章于 2021-06-19 12:51:18 发布

aweigg1816

最新推荐文章于 2021-06-19 12:51:18 发布

阅读量206

点赞数

原文链接：http://www.cnblogs.com/Zzexi/p/11434331.html

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box{width:200px;height:30px;line-height: 30px;margin: 20px auto;}
        .box span{display: block;width: 195px;line-height: 30px;border: solid 1px black;padding-left: 5px;}
        .box ul{width: 200px; margin: 0;padding: 0;list-style: none;overflow: auto;border: solid 1px black;border-top:none;display: none;}
        .box ul li{padding-left: 5px;}
        .active{background: #35f;color: #fff;}
    </style>
</head>
<body>
    <div class="box">
        <span>北京</span>
        <ul>
            <li class="active">北京</li>
            <li>上海</li>
            <li>广州</li>
            <li>深圳</li>
            <li>杭州</li>
            <li>西安</li>
            <li>安徽</li>
        </ul>
    </div>
</body>
<script>
    var ospan = document.querySelector(".box span");
    var oul = document.querySelector(".box ul");
    var ali = document.querySelectorAll(".box ul li");
    
    var i = 0;
    //用i数值来设置ul的显示或隐藏,0为显示,1为隐藏
    var index = 0;
    //设置默认索引值
    ospan.innerHTML = ali[index].innerHTML;
    //把span标签的内容改为数组ali中索引为index的内容
    setActive();        
    //调用函数setActi(在文末)



// 绑定鼠标事件::
    ospan.οnclick=function(eve){
        //绑定ospan点击事件
        var e = eve || window.event;
        //处理事件源的兼容问题
        e.stopPropagation();
        // 阻止事件冒泡
        if(i == 0){
            oul.style.display = "block";
            i=1;
            setActive();
            //调用函数setActive(在文末)
        }
        //当i为0时,ul则显示，i设置为0
        else{
            oul.style.display = "none";
            i=0;
        }
        //当i为1时,ul则隐藏，i设置为1
    }
    
    document.onclick = function(){
        oul.style.display = "none";
        i=0;
    }
    //绑定页面的点击事件,点击页面时ul隐藏，i设置为1
        
    for(var j=0;j<ali.length;j++){
        //遍历数组
        ali[j].index = j;
        //提前给li绑定索引，方便后面设置索引
        ali[j].onmouseover = function(){
            //绑定鼠标在li上移动事件
            for(var k=0;k<ali.length;k++){
                //遍历数组
                ali[k].className = "";
                 // 取消所有li的className
            }
            this.className = "active";
            //设置当前的li的className为"active",从而获得css中.active的样式
        }
        ali[j].onclick = function(){
            //绑定点击li的鼠标事件
            ospan.innerHTML = this.innerHTML;
            //把span标签的内容改为当前li的内容
            index = this.index;
            //把默认索引改为当前li的索引,从而使点击li后关闭下拉菜单,span标签内容变成当前点击选择的内容
        }
    }
    
    
    
    
    
    // 绑定键盘事件::
    document.onkeydown = function(eve){
        e = eve || window.event;
        if(i == 0) return;
        //如果下拉菜单未打开(ul为隐藏状态),则不执行
        if(e.keyCode == 38){
            //在键盘上按上键
            if(index == 0){
                index = 0;
            }
            else{
                index--;
            }
            //如果索引为0时,则索引一直为0(索引为0时，即此时li以及为第一个，所以不能再减了);否则索引自减1
            setActive();
            //调用函数setActi(在文末)
            ospan.innerHTML = ali[index].innerHTML;
        }
        
        if(e.keyCode == 40){
            //按下键
            if(index == ali.length-1){
                index = ali.length-1;
            }
            else{
                index++;
            }
            //如果索引为ali.length-1(数组最后一位)时,则索引一直为ali.length-1;否则索引自增1
            setActive();
            //调用函数setActi(在文末)
            ospan.innerHTML = ali[index].innerHTML;
            //把span标签的内容改为数组ali中索引为index的内容
        }
        
        
        //按回车键,隐藏ul,设置i=0
        if(keyCode == 13){
            ospan.style.display = "none";
            i = 0;
        }    
    }
    
    
    //功能型函数:根据索引设置当前项
    function setActive(){
        for(var k=0;k<ali.length;k++){
            //遍历数组
            ali[k].className = "";
            // 取消所有li的className
        }
        ali[index].className = "active";
        //设置ali数组中索引为index的li的className为"active",从而获得css中.active的样式
    }
</script>
</html>

实现了下拉菜单的所有功能，既可以鼠标操作也可以通过键盘实现上下选择，基本效果如下：

转载于:https://www.cnblogs.com/Zzexi/p/11434331.html

aweigg1816

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js模拟下拉菜单-键盘、鼠标（代码详解）

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta h...
复制链接

扫一扫