<!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: ;padding: ;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 = ;

    //用i数值来设置ul的显示或隐藏,0为显示,1为隐藏

    var index = ;

    //设置默认索引值

    ospan.innerHTML = ali[index].innerHTML;

    //把span标签的内容改为数组ali中索引为index的内容

    setActive();

    //调用函数setActi(在文末)

// 绑定鼠标事件::

    ospan.onclick=function(eve){

        //绑定ospan点击事件

        var e = eve || window.event;

        //处理事件源的兼容问题

        e.stopPropagation();

        // 阻止事件冒泡

        if(i == ){

            oul.style.display = "block";

            i=;

            setActive();

            //调用函数setActive(在文末)

        }

        //当i为0时,ul则显示，i设置为0

        else{

            oul.style.display = "none";

            i=;

        }

        //当i为1时,ul则隐藏，i设置为1

    }

    document.onclick = function(){

        oul.style.display = "none";

        i=;

    }

    //绑定页面的点击事件,点击页面时ul隐藏，i设置为1

    for(var j=;j<ali.length;j++){

        //遍历数组

        ali[j].index = j;

        //提前给li绑定索引，方便后面设置索引

        ali[j].onmouseover = function(){

            //绑定鼠标在li上移动事件

            for(var k=;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 == ) return;

        //如果下拉菜单未打开(ul为隐藏状态),则不执行

        if(e.keyCode == ){

            //在键盘上按上键

            if(index == ){

                index = ;

            }

            else{

                index--;

            }

            //如果索引为0时,则索引一直为0(索引为0时，即此时li以及为第一个，所以不能再减了);否则索引自减1

            setActive();

            //调用函数setActi(在文末)

            ospan.innerHTML = ali[index].innerHTML;

        }

        if(e.keyCode == ){

            //按下键

            if(index == ali.length-){

                index = ali.length-;

            }

            else{

                index++;

            }

            //如果索引为ali.length-1(数组最后一位)时,则索引一直为ali.length-1;否则索引自增1

            setActive();

            //调用函数setActi(在文末)

            ospan.innerHTML = ali[index].innerHTML;

            //把span标签的内容改为数组ali中索引为index的内容

        }

        //按回车键,隐藏ul,设置i=0

        if(keyCode == ){

            ospan.style.display = "none";

            i = ;

        }

    }

    //功能型函数:根据索引设置当前项

    function setActive(){

        for(var k=;k<ali.length;k++){

            //遍历数组

            ali[k].className = "";

            // 取消所有li的className

        }

        ali[index].className = "active";

        //设置ali数组中索引为index的li的className为"active",从而获得css中.active的样式

    }

</script>

</html>

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

js模拟下拉菜单-键盘、鼠标（代码详解）的更多相关文章

  1. JS模拟下拉框select

    最近做的一个项目有下拉框 同事都是用的是美化控件,但是用美化控件当然是好 但是网上找的一个控件不知道扩展性怎么样?对以后的维护会不会造成有影响?比如我想增加一个功能或者减少一个功能会不会影响?还有就是 ...

  2. JS实现下拉菜单的功能

    <!DOCTYPE html> <html> <head> <meta charset = "utf8"> <title> ...

  3. 纯css和js版下拉菜单

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  4. js 联动下拉菜单

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  5. js版本下拉菜单

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  6. bootstrap和JS实现下拉菜单

    // bootstrap下拉菜单 <div class="btn-group"> <button id="button_text" type= ...

  7. PullToRefresh下拉刷新 加载更多 详解 +示例

    常用设置 项目地址:https://github.com/chrisbanes/Android-PullToRefresh a. 设置刷新模式 如果Mode设置成Mode.PULL_FROM_STAR ...

  8. js二级下拉菜单

    看似简单的一个菜单,确需要不少的知识点 1. getByClass getElementsByClassName 已经有大部分现代浏览器支持了,只有ie6,ie7,ie8是不支持的.所以对ie6,7, ...

  9. AngularJS进阶(四)ANGULAR.JS实现下拉菜单单选

    ANGULAR.JS: NG-SELECT AND NG-OPTIONS PS:其实看英文文档比看中文文档更容易理解,前提是你的英语基础还可以.英文文档对于知识点讲述简明扼要,通俗易懂,而有些中文文档 ...

随机推荐

  1. lightoj 1086 - Jogging Trails（状压dp）

    题目链接:http://www.lightoj.com/volume_showproblem.php?problem=1086 题解:题目就是求欧拉回路然后怎么判断有欧拉回路只要所有点的度数为偶数.那 ...

  2. lightoj 1032 - Fast Bit Calculations（数位dp）

    A bit is a binary digit, taking a logical value of either 1 or 0 (also referred to as "true&quo ...

  3. Two Graphs 牛客网暑期ACM多校训练营（第一场）D 图论基础知识 全排列

    链接:https://www.nowcoder.com/acm/contest/139/D来源:牛客网 Two undirected simple graphs and where are isomo ...

  4. hdu 3038 How Many Answers Are Wrong（并查集的思想利用）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3038 题意:就是给出n个数和依次m个问题,每个问题都是一个区间的和,然后问你这些问题中有几个有问题,有 ...

  5. Visual Studio 调试 —— 附加到进程（远程服务器）

    一般在部署环境下不会有 Visual Studio 开发工具的,所以需要有 Remote Debugger(远程调试器) 才可以进行远程调试. Remote Debugger 获取 方法一:Visua ...

  6. Linux运维基础提高之RAID卡和磁盘分区

    磁盘大小计算: 柱面的数量*每个柱面的大小(容量) [root@luffy001 ~]# fdisk -l Disk /dev/sda: 10.7 GB, 10737418240 bytes 255 ...

  7. 弄懂goroutine调度原理

    goroutine简介 golang语言作者Rob Pike说,"Goroutine是一个与其他goroutines 并发运行在同一地址空间的Go函数或方法.一个运行的程序由一个或更多个go ...

  8. C++ lambda的演化

    翻译自https://www.bfilipek.com/2019/02/lambdas-story-part1.html与https://www.bfilipek.com/2019/02/lambda ...

  9. Caused by: java.net.UnknownHostException

    项目中使用某一组件,启动失败Caused by: java.net.UnknownHostException: xxxCentOS6.3: xxxCentOS6.3 解析不到xxxCentOS6.3. ...

  10. Markdown 直接转换公众号文章，不再为排版花时间

    上一篇「又一家数据公司被查,爬虫到底做错了什么?」反响强烈,虽然我这是新号,但还是获得了不少公众号的转发,借机也结识了很多业内大佬,在此感谢大家的抬爱! 同时也有不少号主问我的文章排版是用的哪个网站, ...