zoukankan      html  css  js  c++  java
  • jq模仿下拉菜单select

    今天公司app ios版内测,发现select在安卓和ios上样式不统一,并且不好修改,一气之下放弃使用select,手写了一个用div模仿select的模块

    话不多说上代码

    //样式

    .zezhao {
    100%;
    height: 800px;
    background-color: rgba(0, 0, 0, 0.7);
    position: fixed;
    top: 0;
    }

    .disn {
    display: none;
    }

    .disb {
    display: block;
    }

    .yuan {
    overflow: hidden;
    border-radius: 11px;
    border: 1px solid black;
    }

    .yuany {
    margin-left: 4px;
    margin-top: 4px;
    float: left;
    overflow: hidden;
    border-radius: 6px;
    border: 1px solid #16A086;
    background-color: #16A086;
    }

    .yuanx {
    overflow: hidden;
    border-radius: 11px;
    border: 1px solid #16A086!important;
    }

    //html布局

    <div class="kuang">
    <h3 class="margin">商家类别 * </h3>
    <span class="margin">请选择此项</span>
    <div id="se" style=" 91%; border-radius: 5px; height: 39px; line-height: 39px; padding-left: 10px;font-size: 14px; border: 1px solid black; background-color: white;">请选择</div>
    <input id="see" type="hidden" name="" id="" value="" />
    </div>

    <div class="zezhao disn">
    <div style="border-radius: 4px; 85%;background-color: white;margin: 0 auto; margin-top: 20px;">
    <ul id="u" style=" overflow: hidden; overflow:scroll;">
    <foreach name="catOb" item="v">
    <li class="l" style="height: 50px; line-height: 50px; border-bottom: 1px solid #ccc;padding-left: 30px;" onclick="zjm('{$v.zs_name}','{$v.id}')" value="{$v.id}"><span style="float: left;">{$v.zs_name}</span>
    <div id="{$v.id}" class="yuan" style=" 20px; height: 20px;margin-top: 14.5px; float: right; margin-right: 10px;">
    <span class="" style=" 10px;height: 10px;"></span>
    </div>
    </li>
    </foreach>
    </ul>
    </div>

    </div>

    //jq方法

    <script type="text/javascript" charset="utf-8">

    var h = window.screen.height * 0.7;
    var mh = window.screen.height * 0.1;
    console.log(h)
    $("#u").css("height", h);
    $("#u").css("margin-top", mh);
    $('#se').click(function() {
    $('.zezhao').removeClass('disn');
    $('.zezhao').addClass('disb');
    })

    function zjm(a, b) {

    $('#se').text(a);
    $('#see').val(b);

    $('#' + b + '').addClass('yuanx');
    $('#' + b + '').parents().siblings().children().removeClass('yuanx');
    $('#' + b + ' span').addClass('yuany');
    $('#' + b + '').parents().siblings().children().children().removeClass('yuany');

    }
    $('.l').click(function() {
    $('.zezhao').removeClass('disb');
    $('.zezhao').addClass('disn');
    })

    </script>

  • 相关阅读:
    elasticsearch CriteriaQuery查询例子
    mysql转ElasticSearch的分析 及JAVA API 初探
    java利用HttpClient进行https接口调用
    JDK8新特性:使用stream、Comparator和Method Reference实现集合的优雅排序
    java爬虫入门
    AndroidStudio升到最新版本(3.1.2)之后
    怎样录制简单GIF动图
    android 集成友盟分享之后,想自定义分享面板的看过来
    Android代码中设置字体大小,字体颜色,显示两种颜色.倒计时效果
    Android新特性之CardView的简单使用
  • 原文地址:https://www.cnblogs.com/ydam/p/9217056.html
Copyright © 2011-2022 走看看