<!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. Python openpyxl【包】

    介绍 Excel是我们日常工作中经常用到的办公软件,在处理数据和表格方面有着优异的性能,那么能不能用python来操作Excel呢? 答案是肯定的,openpyxl是一个第三方库,可以处理xlsx格式 ...

  2. ios MJRefresh 上拉死循环刷新问题+git 图片

    网上各种办法都试了,只有这种解决方法解决了我的问题,记录一下 通过延迟 1s后,再来请求接口 - (void)viewDidLoad { [super viewDidLoad]; // Do any ...

  3. phpExcel常用方法详解

    phpExcel常用方法详解[附有php导出excel加超级链接] 发表于4年前(2012-07-20 12:57) 阅读(510) | 评论(0) 0人收藏此文章, 我要收藏 赞0 http://w ...

  4. element select多选选项卡页面抖动问题

    最近做项目是有个功能需要下拉框多选,然后碰到了一个问题就是选择选项的时候出现频繁抖动的情况 问题描述: 页面选择到三个选项时长度为三的时候就会开始抖动,其他长度没有问题,检索elements是发现选择 ...

  5. once函数

    function once(fn){ let down = false; return function(){ if(!down){ down = true; return fn.apply(this ...

  6. 攻防（一）tomcat CVE-2020-1938，ftp 21端口

    TOMCAT kali自带POE msf6 > use auxiliary/admin/http/tomcat_ghostcat set RHOST 10.98.xx.xx msf6 auxil ...

  7. 1.2 Defining Computer Architecture

    Genuine Computer Architecture: Designing the Organization and Hardware to Meet Goals and Functional ...

  8. python题mhy

    def save(s): f=open("test.txt","wt") f.write(s["name"]+"\n") ...

  9. Python+unittest+requests 接口自动化测试框架搭建 完整的框架搭建过程 实战

    一.Python+unittest+requests+HTMLTestRunner 完整的接口自动化测试框架搭建_00--框架结构简解 首先配置好开发环境,下载安装Python并下载安装pycharm ...

  10. js数组原型方法

    今天学习了一下js数组原型的操作方法,小结一下学习地址https://www.cnblogs.com/obel/p/7016414.html 1.join() join(separator): 将数组 ...