<!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;

            text-align: center;}

        .box span{display: block;width: 200px;line-height: 30px;border: solid 1px black;}

        .box ul{margin: 0;padding: 0;list-style: none;overflow: auto;border: solid 1px black;border-top:none;display: none;}

        .box ul li{padding: 0 6px;}

        .box ul li.active{background: #35f;color: #fff;}

    </style>

</head>

<body>

    <select>

        <option value="1">1</option>

        <option value="2">2</option>

        <option value="3">3</option>

        <option value="4">4</option>

    </select>

    <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");

    // 6.设置默认显示项的索引

    var index = 2;

    // 根据默认的索引，设置默认内容

    ospan.innerHTML = ali[index].innerHTML;

    // 下拉菜单的当前项

    setActive();

    // 2.设置下拉菜单的显示或隐藏状态：0为显示，1为隐藏

    var i = 0;

    // 1.绑定显示框的点击事件

    ospan.onclick = function(eve){

        // 5.阻止事件冒泡

        eve.stopPropagation();

        // 3.根据状态显示或隐藏，同时别忘记修改状态

        if(i == 0){

            oul.style.display = "block";

            // 9.每次打开时根据最新索引，设置当前项

            setActive();

            i = 1;

        }else{

            oul.style.display = "none";

            i = 0;

        }

    }

    // 4.点击空白隐藏，同时别忘记修改状态

    document.onclick = function(){

        oul.style.display = "none";

        i = 0;

    }

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

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

        ali[j].index = j;

        // 7.鼠标经过li事件

        ali[j].onmouseover = function(){

            index=this.index//将鼠标与键盘玩到一起

            // 取消所有，显示当前

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

                ali[k].className = "";

            }

            // 注意：this就是鼠标经过的元素

            this.className = "active";

        }

        // 8.li的点击事件

        ali[j].onclick = function(){

            // 设置内容

            ospan.innerHTML = this.innerHTML;

            // 修改索引

            index = this.index;

        }

    }

    document.onkeydown = function(eve){

        console.log(index)

        var e=eve||window.event;

        console.log(e);

        if(e.keyCode==38){

            if(index==0){

                index=0

            }

            else{

                index--

            }

            setActive()//修改li中的当前项；

        }

        if(e.keyCode==40){

            if(index==ali.length-1){

                index=ali.length-1

            }

            else{

                index++

            }

            setActive()//修改li中的当前项；

        }

        if(eve.keyCode == 13){

            // K8.回车隐藏下拉菜单，同时设置状态

            oul.style.display = "none";

            i = 0;

            ospan.innerHTML = ali[index].innerHTML;

        }

    }

    // 功能1：根据索引设置当前项

    function setActive(){

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

            ali[k].className = "";

        }

        ali[index].className = "active";

    }

</script>

</html>

js模拟下拉菜单的更多相关文章

  1. js模拟下拉菜单-键盘、鼠标（代码详解）

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. JS模拟下拉框select

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

  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. JS实现下拉菜单的功能

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

  7. bootstrap和JS实现下拉菜单

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

  8. js实现下拉菜单

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  9. js二级下拉菜单

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

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

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

随机推荐

  1. Flutter 新建项目

    一.打开VSCode,点击侧边栏扩展按钮,搜索flutter,安装Flutter和Dart 二.按command+shift+P,输入flutter,选择Flutter:New project,新建项 ...

  2. lightgbm与贷款违约预测项目

    lightgbm histogram算法 将连续的浮点值离散成k个离散值,构造宽度为k的histogram leaf-wise生长策略 每次在所有叶子中找到分裂增益最大的一个叶子,一般也是数据量最大的 ...

  3. webstrom破解

    1.下载webstrom补丁 链接:https://pan.baidu.com/s/1I93J_JOlbZzkoqV4EsJlpQ       提取码:kopn       (永久有效) 2.将补丁复 ...

  4. 20181224蒋嘉豪-exp5

    网络对抗技术Exp5 信息搜集与漏洞扫描20181224jjh 目录 网络对抗技术Exp5 信息搜集与漏洞扫描20181224jjh 信息搜集技术与隐私保护--知识点总结 间接收集 直接收集 社会工程 ...

  5. ubuntu(一)

    1.首先在上手之前准备几样开发辅助工具: ①vmware ②ubuntu ③xshell ④xftp 2.创建ubuntu系统 打开vmware创建一个新的虚拟机 在创建虚拟机时有几处需要留意 首先是 ...

  6. FCC 高级算法题 收银机找零钱

    Exact Change 设计一个收银程序 checkCashRegister() ,其把购买价格(price)作为第一个参数 , 付款金额 (cash)作为第二个参数, 和收银机中零钱 (cid) ...

  7. asp.net页面button按钮防止重复提交的方法

    网上找了一些实现方案都不行,就自己写了个用,还行. 先放javascript代码: <script type="text/javascript"> var clicks ...

  8. python中将各种类型表达式中的 \ 符号，都看作转义符

    python中将各种类型表达式中的 \ 符号,都看作转义符,如 \n 代表换行  \t  代表空tab,还发现 \a 相当于什么都不是,改行末尾的 \ 的意思是该行还没写完,接着下边一行的内容. 转义 ...

  9. 正向代理和反向代理和spring的动态代理模式有几种?默认是那种?如何切换?

    spring的动态代理模式有几种?默认是那种?如何切换? spring的动态的代理模式有两种 JDK动态代理,基于接口(默认代理模式),CGLIB动态代理(若要使用需要进行配置) JDK动态代理是由j ...

  10. EXT GridPanel button 按钮 事件 方法 DirectMethod

    C# 代码 //首页 Ext.Net.Button btnFirst = new Ext.Net.Button(); btnFirst.Icon = Icon.ControlStartBlue; bt ...