<!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. hihocoder #1609 : 数组分拆II（思维）

    题目链接:http://hihocoder.com/problemset/problem/1609 题解:就先拿一个数组最多分成两部分来说吧 8 1 2 3 4 5 1 2 3 显然 输出时2 3 可 ...

  2. Codefroces 920F SUM and REPLACE（线段树）

    SUM and REPLACE 题意:给你n个数,进行m次操作,分别是将区间[l,r]内的所有数替换成自己的因子数 和 对区间[l,r]进行求和. 题解:可以发现2的因子个数还是2,1的因子个数还是1 ...

  3. 2017 计蒜之道 初赛 第五场 UCloud 的安全秘钥（中等）

    每个 UCloud 用户会构造一个由数字序列组成的秘钥,用于对服务器进行各种操作.作为一家安全可信的云计算平台,秘钥的安全性至关重要.因此,UCloud 每年会对用户的秘钥进行安全性评估,具体的评估方 ...

  4. spark与mapreduce的区别

    spark是通过借鉴Hadoop mapreduce发展而来,继承了其分布式并行计算的优点,并改进了mapreduce明显的缺陷,具体表现在以下几方面: 1.spark把中间计算结果存放在内存中,减少 ...

  5. 宝塔Linux面板命令

    安装宝塔 Centos安装脚本 yum install -y wget && wget -O install.sh http://download.bt.cn/install/inst ...

  6. 通过网上的webservice自己编写两个客户端

    1.根据电话号码查询归属地等信息 根据http://ws.webxml.com.cn/WebServices/MobileCodeWS.asmx?wsdl采用jdk生成所需的代码,编写一个contro ...

  7. Node.js+Navicat for MySQL实现的简单增删查改

    前提准备: 电脑上必须装有服务器环境,Navicat for MySQL(我用的是这款MySQL,可随意),Node环境 效果如图所示: 源码地址: GitHub:https://github.com ...

  8. Salesforce学习之路-admin篇

    Salesforce是一款非常强大的CRM(Customer Relationship Management)系统,国外企业使用十分频繁,而国内目前仅有几家在使用(当然,国内外企使用的依旧较多),因此 ...

  9. 1、Spark 2.1 源码编译支持CDH

    目前CDH支持的spark版本都是1.x, 如果想要使用spark 2x的版本, 只能编译spark源码生成支持CDH的版本. 一.准备工作 找一台Linux主机, 由于spark源码编译会下载很多的 ...

  10. 记一次处理mysql数据库无故锁表的经历

    某日,生产环境上的用户表突然无故锁表,原以为只是偶发的bug.所以第一时间想到的解决方案简单粗暴:重启数据库(service mysqld restart).问题得以解决. 10min后,该表再次锁表 ...