<!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. 2017福建省赛 FZU 2278 YYS 数学 大数

    Yinyangshi is a famous RPG game on mobile phones. Kim enjoys collecting cards in this game. Suppose ...

  2. Codefroces 366 C Dima and Salad（dp）

    Dima and Salad 题意:一共有n种水果,每种水果都有一个ai, bi,现求一个最大的ai总和,使得ai之和/对应的bi之和的值等于K. 题解:将bi转换成偏移量,只要偏移到起点位置,就代表 ...

  3. ASP.NET Core 3.0 迁移避坑指南

    一.前言 .NET Core 3.0将会在 .NET Conf 大会上正式发布,截止今日发布了9个预览版,改动也是不少,由于没有持续关注,今天将前面开源的动态WebApi项目迁移到.NET Core ...

  4. solr 的基本用法

    上图为 solr 的搜索页面,常用字段的基本用法如下: 1. q: 查询字符串,过滤条件,不能为空,必须输入,如果查询全部就写 * : * name:“马”  AND age:[0 TO 18]   ...

  5. Asterisk13.23.1如何增加G723编码和G729编码

    文章主要将如何配置Asterisk G729的编码和G723的编码问题 今天在配置语音电话过程中踩到一个坑,就是在对接线路过程中出现了一个报错,在传到对方线路过程中出现无法转码从而导致报错. 查看了下 ...

  6. 前端-HTML-web服务本质-HTTP协议-请求-标签-01(待完善)

    目录 前端 什么是前端 什么是后端 学习流程 前端三剑客的形容 web服务的本质 测试--浏览器作为客户端向服务器发起请求 浏览器输入网址回车发生了几件事 ***** HTTP协议(超文本传输协议) ...

  7. JS枚举对象属性的方法及其区别

    愉快的中秋节要过去了,国庆倒计时两个周!!! 闲话不多说,那今天我们来看一看JS中枚举对象属性的方法有哪些以及他们的区别 首先在JS里面枚举对象属性一共有三种方法 for in: 会遍历对象中所有的可 ...

  8. PyTorch在笔记本上实现CUDA加速

    最近刚开始学习深度学习,参考了一篇深度学习的入门文章,原文链接:https://medium.freecodecamp.org/everything-you-need-to-know-to-maste ...

  9. Unity3D_04_GameObject，Component，Time，Input，Physics

    Unity3D是一个Component-Based的游戏引擎,并且为GamePlay Programmer提供了很多游戏性层上的支持. 1.可以在图形界面上设计动画状态转换的Animator. 2.可 ...

  10. jmeter 查看结果树数据分析 优化

    1.点击查看结果树,配置 2.筛选功能项