用html+css+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>
        div,span,ul,li{margin: 0;padding: 0;}

        ul,li{list-style: none;}

        #box{width: 200px;height: 30px;}

        span{width: 200px;height: 30px;border: 1px solid black;display: block;line-height: 30px;text-align: center;}

        .list{width: 200px;height: 90px;display: none;}

        .list li{width: 200px;height: 30px;border: 1px solid black;border-top:none;}
        .list .active{background: #66f;color: #fff;}
    </style>
</head>
<body>
    <select>
        <option value="上海">上海</option>
        <option value="北京">北京</option>
        <option value="广州">广州</option>
        <option value="广州">青岛</option>
    </select>
    <div id="box">
        <span>上海</span>
        <ul class="list">
            <li class="active">上海</li>
            <li>北京</li>
            <li>广州</li>
            <li>青岛</li>
            <li>杭州</li>
        </ul>
    </div>
</body>
<script>
    // html+css+js模拟下拉菜单
    var olist = document.querySelector(".list");
    var ospan = document.querySelector("span");
    var ali = document.querySelectorAll(".list li");
    //决定状态   为1时显示，为2时隐藏
    var type = 1;
    //默认索引样式
    var index = 0;
    clearActive();
    
    //点击span显示区域的内容
    ospan.onclick = function(eve){
        var e = eve || window.event;
        if(type === 1){
            olist.style.display = "block";
            clearActive();
            type = 2;
            
        }else{
            olist.style.display = "none";
            clearActive();
            type = 1;
        }
        stopBubble(e);
    }
    
    for(var i=0;i<ali.length;i++)
    {
        
        //给li绑定索引
        ali[i].xuhao = i;
        //点击li     下面的点哪个哪个值上去
        ali[i].onclick = function(eve){
            var e = eve || window.event;
            ospan.innerHTML = this.innerHTML;
            //每个事件的序号
            index = this.xuhao;
        }
        //点过span后鼠标滑过下面
        ali[i].onmousemove = function(eve){
            var e = eve || window.event;
            index = this.xuhao;
            clearActive();
        }
        //鼠标划出时，取消颜色样式
        ali[i].onmouseout = function(eve){
            var e = eve || window.event;
            this.className = "";
        }
    }
    //点击空白
    document.onclick = function(){
        olist.style.display = "none";
        type = 1;
    }
    
    //设置默认样式
    function clearActive(){
        for(var i=0;i<ali.length;i++)
        {
            ali[i].className = "";
        }
        ali[index].className = "active";
    }

    function stopBubble(e){
        if(e.stopPropagation){
                e.stopPropagation();
        }else{
            e.cancelBubble = true;
        }
    }
</script>
</html>
用html+css+js模拟下拉菜单

猜你喜欢
