• js模拟下拉菜单


    <!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{200px;height:30px;line-height: 30px;margin: 20px auto;
                text-align: center;}
            .box span{display: block; 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>
  • 相关阅读:
    第六章 条件处理
    VS2019配置MKL教程(Windows)
    攻防世界--srm-50
    攻防世界--The_Maya_Society
    攻防世界--re1-100
    BUUCTF--findit
    凯撒加密与解密实现
    BUUCTF--rsa
    正则表达式
    PyQuery详解
  • 原文地址:https://www.cnblogs.com/hy96/p/11425117.html
Copyright © 2020-2023  润新知