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>

  • 相关阅读:
    Extjs Ext.ux.IFrame的用法 以及父子窗口间函数相互调用
    Android ADB server didn't ACK * failed to start daemon * 简单有效的解决方案
    Java sun.misc.Unsafe类的学习笔记
    Java 并发编程学习笔记 理解CLH队列锁算法
    深入理解Java虚拟机 -- 读书笔记(1):JVM运行时数据区域
    Java并发编程学习笔记 深入理解volatile关键字的作用
    JVM Client Server启动设置
    双重检查锁定与延迟初始化
    Tomcat 添加为系统服务 开机自动启动
    配置TOMCAT 修改默认ROOT路径
  • 原文地址:https://www.cnblogs.com/ydam/p/9217056.html
Copyright © 2011-2022 走看看