移动端自定义的下拉插件

最新推荐文章于 2024-03-07 08:53:08 发布

poetPg

最新推荐文章于 2024-03-07 08:53:08 发布

阅读量2.1k

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/weixin_42488404/article/details/80860668

版权

js 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

鉴于ios自带的select,使得select标签及相关插件都无法使用，自己便写了这个移动端下拉demo。

自定义下拉遇到的一个小的难点是点击其他区域隐藏当前下拉，并且点击其他下拉时，当前下拉也隐藏。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/common.css">
    <style>
        .select_box{
            width: 180px;
            height: 28px;
            position: relative;
            font-size: 14px;
            color:#333;
            font-family: "宋体";
        }
        .select_box .select_content{
            width: 100%;
            height: 28px;
            line-height: 28px;
            text-align: center;
        }
        .select_box .select_content i{
            display: inline-block;
            width: 10px;
            height: 7px;
            background:url("img/down_grey_icon_03.png") no-repeat;
            margin-left: 5px;
        }
        .select_box .select_content.active i{
            background:url("img/up_grey_icon_03.png") no-repeat;
        }
        .select_box .select_list{
            width: 100%;
            border:1px solid #ccc;
            background-color: #fff;
            position: absolute;
            top:28px;
            left:0;
            display: none;
            z-index: 999;
        }
        .select_box .select_list > li{
            text-align: center;
            height: 28px;
            line-height: 28px;
            border-bottom: 1px solid #ccc;
        }
        .select_box .select_list > li.active{
            background-color: #eee;
        }
    </style>
</head>
<body>
<div class="select_box">
    <div class="select_content"><span>2018年第一学期弹性离校</span><i></i></div>
    <ul class="select_list">
        <li>2018年第一学期弹性离校</li>
        <li>2018年第二学期弹性离校</li>
    </ul>
</div>
<br>
<br>
<br>
<br>
<br>
<div class="select_box">
    <div class="select_content"><span>2008</span><i></i></div>
    <ul class="select_list">
        <li>2009</li>
        <li>2010</li>
    </ul>
</div>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script>
    $(function(){
        /*
        * 移动端select有bug，使用自定义的下拉
        * 实现点击其他位置使得当前下拉自动收起
        * */
        var selTar;//记忆选中标签
        $(".select_content").on("click",function(e){
            selTar = e.target;
            $(".select_list").hide();
            $(".select_content").removeClass("active");
            $(this).addClass("active");
            $(this).next().show();
        });
        $(".select_list li").on("click",function(e){
            $(this).parent().hide();
            $(".select_content").removeClass("active");
            var html = $(this).html();
            $(this).addClass("active").siblings().removeClass("active");
            $(this).parent().prev().find("span").html(html);
        });
        $(document).on("click",function(e){
            if(e.target != selTar){
                $(".select_list").hide();
                $(".select_content").removeClass("active");
            }
        });
    })
</script>
</body>
</html>

代码路径：demo/myweb/mySelect.html点击打开链接。

poetPg

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
移动端自定义的下拉插件

鉴于ios自带的select,使得select标签及相关插件都无法使用，自己便写了这个移动端下拉demo。自定义下拉遇到的一个小的难点是点击其他区域隐藏当前下拉，并且点击其他下拉时，当前下拉也隐藏。代码如下：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&...
复制链接

扫一扫