zoukankan      html  css  js  c++  java
  • 写了一个可以个性化设置的仿<select>标签

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="jquery.js">
    
        </script>
        <style>
            .select{
                 100px;
                height: 20px;
                position: relative;
                margin-top: 20px;
            }
            .select_show{
                 inherit;
                height: inherit;
                border: 1px solid gray;
            }
            .select_option{
                 inherit;
                height: inherit;
                border: 1px solid gray;
                border-top: 0;
            }
            .select_option_container{
                 inherit;
                display: none;
                position: absolute;
                z-index: 999;
    
            }
        </style>
    </head>
    <body>
    <div class="select">
        <div class="select_show">222</div>
        <div class="select_option_container">
            <div class="select_option">111</div>
            <div class="select_option">222</div>
            <div class="select_option">333</div>
        </div>
    </div>
    <div class="select">
        <div class="select_show">222</div>
        <div class="select_option_container">
            <div class="select_option">111</div>
            <div class="select_option">222</div>
            <div class="select_option">333</div>
        </div>
    </div>
    <div class="select">
        <div class="select_show">222</div>
        <div class="select_option_container">
            <div class="select_option">111</div>
            <div class="select_option">222</div>
            <div class="select_option">333</div>
        </div>
    </div>
    <div class="select">
        <div class="select_show">222</div>
        <div class="select_option_container">
            <div class="select_option">111</div>
            <div class="select_option">222</div>
            <div class="select_option">333</div>
        </div>
    </div>
    <div class="select">
        <div class="select_show">222</div>
        <div class="select_option_container">
            <div class="select_option">111</div>
            <div class="select_option">222</div>
            <div class="select_option">333</div>
        </div>
    </div>
    <script>
        $(".select_show").click(function(){
            var optionContainerLeft=0;
            var optionContainerTop=$(this).outerHeight();
            $(this).closest(".select").find(".select_option_container").css("left",optionContainerLeft).css("top",optionContainerTop).show();
        })
        $(".select_option").click(function(){
            $(this).closest(".select_option_container").hide();
            $(this).closest(".select").find(".select_show").html($(this).html());
        })
    
    </script>
    </body>
    </html>
  • 相关阅读:
    Qt生成随机数
    Qt调用系统DLL,判断网络连接状态
    Qt操作sqlite数据库
    Qt 操作注册表
    vs报错:RC1004 unexpected end of file found
    Qt操作ini文件
    Django Admin:自动选择当前用户
    BSTR转QString
    vue-cli4,vue3打包后页面无内容
    Qt 5.12.10 国际化
  • 原文地址:https://www.cnblogs.com/liuhao-web/p/6694988.html
Copyright © 2011-2022 走看看