css模拟下拉菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css模拟下拉菜单</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        ul {
            list-style: none;
        }
        #select {
            margin: 30px auto;
            width: 200px;
        }
        #input {
            width: 100%;
            line-height: 18px;
            outline: none;
            box-sizing: border-box;
            border-radius: 8px;
            border: 1px solid #ccc;
            padding: 0 8px;
        }
        #input:focus {
            box-shadow: 0 0 5px blue;
        }
        #list {
            display: none;
            border: 1px solid #ccc;
            box-sizing: border-box;
            width: 100%;
            border-bottom: none;
        }
        #list li {
            padding: 6px 4px;
            border-bottom: 1px solid #ccc;
        }
    </style>
    <script type="text/javascript" src="conn.js"></script>
    <script>
        window.onload = function () {
            var
                oInput = $('input'),
                oList = $('list'),
                aLi = oList.children;
            oInput.onfocus = function () {
                oList.style.display = 'block';
            }
            //给每个LI添加click事件
            for (var i = 0; i < aLi.length; i++) {
                aLi[i].onclick = function () {
                    oInput.value = this.innerHTML;
                }
            }
            oInput.onblur = function () {
                setTimeout(function () {
                    oList.style.display = 'none';
                },200);
            }
        }
    </script>
</head>
<body>
    <div id="select">
        <input type="text" id="input">
        <ul id="list">
            <li>食品</li>
            <li>汽车</li>
            <li>衣服</li>
            <li>珠宝</li>
            <li>化妆品</li>
        </ul>
    </div>
</body>
</html>
猜你喜欢
