找回密码
当前位置：前端开发者 > 教程 > 正文

前端开发自定义select下拉框

2018-07-30 分类：教程 / 面试 阅读(827) 评论(0)

前端模块化开发 知乎|谷歌浏览器的前端开发工具|前端页面开发步骤

html 代码

<!DOCTYPE html>
<head lang=”en”>
    <meta charset=”UTF-8″>
    <title>小程序开发 前端后端</title>
    <!–<link rel=”stylesheet” href=”bootstrap.css”/>–>
    <link href=”http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css” rel=”stylesheet”>
    <!–<script src=”jquery-1.11.3.js”></script>–>
    <script src=”http://code.jquery.com/jquery-1.8.0.min.js”></script>
    <style>
        ul,
        li,
        ol,
        li {
            list-style: none;
            margin: 0;
            padding: 0;
        }
        a,
        a:link,
        a:hover,
        a:visited {
            text-decoration: none;
            color: #333;
            cursor: pointer;
        }
        .dk_toggle:hover {
            color: #00a2d2;
        }
        .fg-text {
            width: 110px;
            float: left;
            line-height: 34px;
            text-align: right;
            padding-right: 5px;
            margin-bottom: 0;
            font-family: “Helvetica Neue”, Helvetica, Arial, sans-serif;
            font-size: 13px;
            font-weight: normal;
        }
        .fg-input {
            margin-left: 110px;
            position: relative;
        }
        .dk_toggle {
            width: 100%;
            border: 1px solid #ccc;
            border-radius: 5px;
            display: inline-block;
            font-size: 14px;
            color: #333;
            padding: 7px 10px;
        }
        .dk_toggle:after {
            border-top: 5px solid #4B4B4B;
            border-right: 5px solid transparent;
            border-left: 5px solid transparent;
            content: “”;
            position: absolute;
            right: 15px;
            top: 45%;
        }
        .dk_option {
            position: absolute;
            top: 32px;
            width: 100%;
            border: 1px solid #8c8c8c;
            border-bottom-left-radius: 5px;
            border-bottom-right-radius: 5px;
            border-top-color: #ddd;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
            z-index: 100;
            background: #FFFFFF
        }
        .dk_option ul li {
            width: 100%;
            padding: 8px 10px;
        }
        .dk_hover {
            background: #00a2d2
        }
        .hide {
            display: none
        }
    </style>
</head>
<body>
    <div class=”form-group col-md-6″>
        <label class=”fg-text”>项目列表：</label>
        <div class=”fg-input”>
            <a href=”#” class=”dk_toggle”>请选择</a>
            <div class=”dk_option hide”>
                <ul>
                    <li class=”dk_hover”>
                        <a href=”#”>请选择</a>
                    </li>
                    <li>
                        <a href=”#”>项目一</a>
                    </li>
                    <li>
                        <a href=”#”>项目二</a>
                    </li>
                    <li>
                        <a href=”#”>项目三</a>
                    </li>
                    <li>
                        <a href=”#”>项目四</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <script>
        $(function () {
            $(“a,input,button”).focus(function () { this.blur() });
            var dk_option = $(“.dk_option”);
            var dk_toggle = $(“.dk_toggle”);
            dk_toggle.click(function (event) {
                event.preventDefault();
                if (dk_option.hasClass(“hide”)) {
                    dk_option.removeClass(“hide”);
                } else {
                    dk_option.addClass(“hide”)
                }
            });
            dk_option.on(“mouseover”, “li”, function () {
                $(this).addClass(“dk_hover”)
                    .siblings(“li”)
                    .removeClass(“dk_hover”)
            });
            dk_option.on(“click”, “li”, function () {
                dk_toggle.html($(this).children(“a”).html())
                    .next(“.dk_option”)
                    .addClass(“hide”);
            })
        });
    </script>
</body>
</html>

前端开发面试项目展示|前端开发需要哪些知识|前端开发助理面试题

赞(0)
前端开发者 » 前端开发自定义select下拉框
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论