抽屉式性别（男女）选择

代码：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
    <title>Document</title>
    <style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }
    
    body {
        max-width: 640px;
        margin: 0 auto;
         background: #52007c;
 
    }
    .J_sex{ padding:30px 5px; }
    
    .downNav span {
        display: inline-block;
        width: 96%;
        height: 50px;
        margin-left: 2%;
        line-height: 50px;
        border-bottom: 1px solid #f5f5f5;
        text-align: center;
    }
    
    .downNav span:hover {
        background-color: #f5f5f5;
    }
    
    .downNav {
        width: 100%;
        height: 40%;
        background-color: #fff;
        position: fixed;
        z-index: 999;
        bottom: -40%;
    }
    
    .input {
        width: 39%;
        height: 25px;
        line-height: 25px;
        border-radius: 5px;
        background-color: #fff;
        padding: 0 5px;
        box-sizing: border-box;
        display: block;
        float: left;
    }
    
    .pf_body li span {
        display: inline-block;
    }
    
    .pfb_list {
        width: 22%;
        text-align: center;
        float: left;
        color: #fff;
    }
    .input em{ font-style: normal; display: inline-block; width: 100%; height: 25px;line-height: 25px;}
    </style>
</head>

<body>
    <div class="J_sex">
        <div class="input">
            <em class=" J_sex_down"></em>
            <input type="hidden" name="biz_user_sex" value="1" />
        </div>
        <span class="pfb_list">性别</span>
        <div class="input">
            <em class=" J_sex_down"></em>
            <input type="hidden" name="biz_user_sex2" value="1" />
        </div>
    </div>
    <!-- 性别弹窗 -->
    <div class="bgDiv" id="bgDiv"></div>
    <div class="downNav" id="downNav">
        <span data-value="1">男</span>
        <span data-value="0">女</span>
    </div>
    <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function() {
        // 性别
        var sex_down = $('.J_sex_down');
        var bg = $('#bgDiv');
        var downNav = $('#downNav');
        sex_down.on('click', function() {
            $(this).parent().addClass("current");
            bg.css({
                display: "block",
                transition: "opacity .5s"
            });
            downNav.css({
                bottom: "0px",
                transition: "bottom 1s"
            });
            $('#downNav span').on('click', function() {
                hideNav();
                var value = $(this).data('value');
                $(".J_sex .current").find("em").text($(this).html())
                    .parent().find('input').val(value)
                    .parent().removeClass("current");
            });
        });

        bg.on('click', function() {
            hideNav();
        });

        function hideNav() {

            downNav.css({
                bottom: "-50%",
                webkitTransition: "bottom .5s",
                oTransition: "bottom .5s",
                mozTransition: "bottom .5s",
                transition: "bottom .5s"
            });
            bg.css({
                display: "none",
                transition: "display 1s"
            });
        }
    });
    </script>
</body>

</html>

效果图：

 

posted @ 2017-04-19 15:24  前端HL  阅读(268)  评论(0)  编辑  收藏  举报