<!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. org.apache.catalina.LifecycleException: Error in resourceStart()

    ssh项目,tomcat7,又一个月没运行这个项目,再次运行就给我报tomcat7无法启动错误.看了其他博客基本分为三类: 1.情work目录的,https://blog.csdn.net/iteye ...

  2. 关于DELL服务器风扇远程控制失效

    关于DELL服务器风扇远程ipmitool控制失效 去年12月,公司突然断电,公司有一台DELL 720XD服务器,自从断电之后,使用ipmitool命令行控制风扇速度就失效了,因为之前忙其他的项目, ...

  3. 4组-Alpha冲刺-4/6

    一.基本情况 队名:摸鲨鱼小队 组长博客:https://www.cnblogs.com/smallgrape/p/15553653.html 小组人数:8人 二.冲刺概况汇报 组长:许雅萍 过去两天 ...

  4. copy file from remote server to local

    scp -r root@IP:/path/to/file(file path on the server) /path/to/filedestination(local path)

  5. 学习JavaScript第五周

    MySQL基本内容: 访问:2种 ​ 1.图形化界面 - 傻瓜式 ​ 要求:同时打开apache和mysql ​ 访问:127.0.0.1:端口号/phpmyadmin ​ localhost:端口号 ...

  6. matlab函数学习笔记

    数值精度 显示精度由format函数控制,不影响原始数据,只控制显示精度 命令 说明 long   short   rat 分数 digits   vpa   pi的输出 命令 显示结果结果 form ...

  7. Day02 差点水掉 欸呀呀

    Java狂神6.17星期四 知识行 冯诺依曼+图灵 软件+硬件 .......... 快捷键 ctrl+a 全选 ctrl+x 剪切 alt+F4 关闭窗口 win+r 运行 +cmd命令行 win+ ...

  8. RabbitMQ管理控制台的使用

    RabbitMQ管理控制台的使用 添加一个用户 添加一个Virtual Hosts 把虚拟机和用户绑定 点击创建的虚拟机 配置 rabbitmq.config cp rabbitmq.config.e ...

  9. RKO队——冲刺随笔（4）

    这个作业属于哪个课程 至诚软工实践F班 这个作业要求在哪里 第五次团队作业:项目冲刺 这个作业的目标 记录冲刺计划.要求包括当天会议照片.会议内容以及项目燃尽图(项目进度) 1.昨日进展 对小程序的的 ...

  10. 关于PLC的脉冲输出（S7-300）

    1.   关于脉冲输出 脉冲输出的方法有很多: 如果要产生占空比为50%的脉冲信号: ①     用S7-300PLC的时钟存储器 右键点击PLC,选中时钟存储器,默认存储字节为0. 各时钟存储器的周 ...