<!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. dp递推 hdu1978

    How many ways Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Tot ...

  2. yzoj1568: 数字组合 题解

    题意 从n个数中选出和为m的组合个数(输入顺序不同的数是不同的) 输入样例: 4 4 1 1 2 2 输出样例 3 我们把每个数看作一件物品,它的重量就是它的值,价值就是1,而和m即为背包的容积,故背 ...

  3. Docker详解（一）

    目录 Docker简介 Docker组成 永远的HelloWorld 序言:众所周知,近几年的互联网各项技术发展的如火如荼,敏捷开发模式越来越普及,"快"似乎成为了行业的标准,于是 ...

  4. 10 UA池和代理池

    在Scrapy中,引擎和下载器之间有一个组件,叫下载中间件(Downloader Middlewares).因它是介于Scrapy的request/response处理的钩子,所以有2方面作用: (1 ...

  5. Erlang 不同版本内容

    OTP 22.0 Erlang/OTP 22是一个新的主要版本,具有新的特性和改进,同时也具有不兼容性. 要更深入地了解OTP 22发行版的亮点,您可以阅读我们的博客: http://blog.erl ...

  6. 【Nginx】基础学习概览【汇总】

    一.Nginx 简介安装启动 二.Nginx的应用场景 三.Nginx中的配置命令 四.实现动态负载均衡 五.四层负载均衡 六.主从热备 七.动静分离 一.Nginx 简介安装启动 [Nginx]简介 ...

  7. Java中存储金额用什么数据类型

    Java面试高频问题:你会用什么数据类型来存储金额? 如果这个时候你回答float,double那么恭喜你,又可以省出时间来准备别的公司的面试了,当面试官说float,和double不行的时候你可能还 ...

  8. ORM之Dapper运用

    一.前言 上一篇[分层架构设计]我们已经有了架构的轮廓,现在我们就在这个轮廓里面造轮子.项目要想开始,肯定先得确定ORM框架,目前市面上的ORM框架有很多,对于.net人员来说很容易就想到以ADO.N ...

  9. linux下tomcat无法远程访问（开放8080端口）

    我们在linux下配置了tomcat后发现,无法访问除了linux(如果是虚拟机的话,宿主机子根本无法访问tomcat),解决下吧 原因是我们的tomcat访问需要8080端口,但是从外部访问,我们的 ...

  10. P0.0口驱动一个LED闪烁

    #include<reg51.h> //头文件 sbit LED=P0^; //led接P0.0,定义P0.0为P0^0 void delay(unsigned int x) //延时函数 ...