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>
  • 相关阅读:
    python little things
    python unittest
    install Pycrypto on windows
    share directory in virtualbox
    django template设置
    echarts使用记录
    node下图片自动处理
    Mac OS X 访问 Windows 共享文件夹
    django 登录配置记录
    【转】让iframe在iOS设备手机浏览器上支持滚动
  • 原文地址:https://www.cnblogs.com/liuhao-web/p/6694988.html
Copyright © 2011-2022 走看看