<!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. Codeforces Round #484 (Div. 2) B. Bus of Characters（STL+贪心）982B

    原博主:https://blog.csdn.net/amovement/article/details/80358962 B. Bus of Characters time limit per tes ...

  2. Maximum Product UVA - 11059

    Given a sequence of integers S = {S1, S2, . . . , Sn}, you should determine what is the value of the ...

  3. codeforces 768 B. Code For 1（二分）

    题目链接:http://codeforces.com/contest/768/problem/B 题意:给你一个数n和区间l,r,每次都能把任意数拆成n/2,n%2,n/2三个数,直到变成0和1,问区 ...

  4. JS数组方法整理（附使用示例）

    整理目前所用过的数组方法,学习了新增的es6方法. 1.arr.push() 从后面添加元素,返回值为添加完后的数组的长度 let arr = [1,2, is 8.3,4,5] console.lo ...

  5. 分布式之分布式事务、分布式锁、接口幂等性、分布式session

    一.分布式session session 是啥?浏览器有个 cookie,在一段时间内这个 cookie 都存在,然后每次发请求过来都带上一个特殊的 jsessionid cookie,就根据这个东西 ...

  6. MultipartFile 获取上传TXT文件字数

    @ResponseBody @RequestMapping(value = "/addImgForDynamic")//(发布动态) public Map addImgForDyn ...

  7. 基础知识：Mysql基本操作命令

    启动mysql :  mysql -hlocalhost -uroot -p 创建数据库:create database 数据库名字; 指定要操作的数据库:use 数据库名字; 查看数据表建表语句:s ...

  8. 「小技巧」使用Git从其他分支merge个别文件

    小明发现在实际项目开发过程中,总会遇到各种各样的情况,比如一个大型的项目或版本迭代可能不是一次上线,可能会分好几次上线,这时候就会涉及创建多个分支,分别开发. 项目背景 产品经理:我们本次开发三个功能 ...

  9. CentOS7 常用命令

    常用命令 1.文件与目录操作 命令 解析 cd /home 进入 ‘/home’ 目录 cd .. 返回上一级目录 cd ../.. 返回上两级目录 cd - 返回上次所在目录 cp file1 fi ...

  10. JAVA WEB中的Servlet过滤器

    实现一个Servlet过滤器,可以对用户登录情况进行控制.要求如下: 1)访问路径是admin下的资源,需要登录,如果用户没有登录,自动转向用户登录页面.用户登录成功后,再次访问admin下的资源不需 ...