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

前端模拟下拉框（select）

2018-11-29 分类：教程 阅读(623) 评论(0)
web前端开发 浏览器兼容性问题
前端开发浏览器兼容测试工具
前端开发专用浏览器

html 代码

<!DOCTYPE html PUBLIC “-//W3C//DTD html 4.01 Transitional//EN”>
    <head>
        <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
        <title></title>
        <style type=”text/css”>
            * {
                padding: 0;
                margin: 0;
            }
            ul,
            li {
                list-style: none;
            }
            .left {
                float: left;
            }
            .right {
                float: right;
            }
            .select_contain {
                font-size: 14px;
                color: #333;
                line-height: 38px;
                margin: 30px 0;
            }
            .select_item {
                margin-right: 50px;
                position: relative;
            }
            .select_tit {
                margin-right: 20px;
            }
            .select_result {
                width: 100px;
                line-height: 38px;
                border: 1px solid #ccc;
                text-align: center;
                border-radius: 4px;
                text-indent: -8px;
                cursor: pointer;
            }
            .select_result .triangle {
                border: 5px solid transparent;
                border-top: 5px solid #666;
                position: absolute;
                top: 16px;
                right: 8px;
            }
            .select_item ul {
                display: none;
                position: absolute;
                top: 100%;
                right: 0;
                width: 100px;
                background: #f3f3f3;
                border: 1px solid #ccc;
                border-radius: 0 0 4px 4px;
                border-top-color: #f3f3f3;
                margin-top: -4px;
            }
            .select_item ul li {
                text-align: center;
                cursor: pointer;
            }
            .select_item ul li:hover {
                background: #f4a100;
                color: #fff;
            }
        </style>
        <script src=”http://cdn.bootcss.com/jquery/3.2.1/jquery.js”></script>
        <script>
            function select() {
                $(document).click(function() {
                    $(‘.select_module_con ul’).slideUp()
                })
                var module = $(‘.select_result’)
                module.click(function(e) {
                    e.stopPropagation()
                    var ul = $(this).next()
                    ul.stop().slideToggle()
                    ul.children().click(function(e) {
                        e.stopPropagation()
                        $(this)
                            .parent()
                            .prev()
                            .children(‘span’)
                            .text($(this).text())
                        ul.stop().slideUp()
                    })
                })
            }
            $(function() {
                select()
            })
        </script>
    </head>
    <body>
        <div class=”select_contain”>
            <div class=”select_item clearfix left”>
                <div class=”select_tit left”>选择节目:</div>
                <div class=”select_module_con left”>
                    <div class=”select_result”>
                        <span>选择节目</span>
                        <div class=”triangle”></div>
                    </div>
                    <ul>
                        <li>节目1</li>
                        <li>节目2</li>
                        <li>节目3</li>
                    </ul>
                </div>
            </div>
            <div class=”select_item clearfix left”>
                <div class=”select_tit left”>选择嘉宾:</div>
                <div class=”select_module_con left”>
                    <div class=”select_result”>
                        <span>选择嘉宾</span>
                        <div class=”triangle”></div>
                    </div>
                    <ul>
                        <li>嘉宾1</li>
                        <li>嘉宾2</li>
                        <li>嘉宾3</li>
                    </ul>
                </div>
            </div>
        </div>
    </body>
</html>
前端开发解决浏览器的兼容性问题
前端开发，不同浏览器的兼容
前端开发使用的浏览器
赞(0)
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论