<!DOCTYPE html>

 <html>

 <head>

 <meta charset="utf-8" />

 <title>案例测试</title>

 <link rel="stylesheet" href="css/all.css" />

 <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>

 <script type="text/javascript" src="js/all.js"></script>

 </head>

 <body>

 <!-- End 模拟下拉框 -->

 <div class="select">

     <div class="input_in">

         <input type="text" value="D.C" />

     </div>

     <div class="city hide">

         <ul>

             <li>New York1</li>

             <li>New York2</li>

             <li>New York3</li>

             <li>New York4</li>

             <li>New York5</li>

             <li>New York6</li>

         </ul>

     </div>

 </div>

 <!-- End 模拟下拉框 -->

 </body>

 </html>
 /* 公共样式 */

 * { padding:; margin:; list-style: none; font-size: 14px; }

 .hide { display: none; }

 input { outline: none; }

 /* 模拟下拉框 */

 .select { position: relative; margin: 50px 0 0 100px; }

 .select .input_in input { width: 188px; height: 20px; line-height: 20px; padding: 10px 0 10px 10px; border: 1px solid #d6d6d6; cursor: pointer; }

 .select .city { position: absolute; top: 40px; left:; }

 .select .city ul { width: 198px; border: 1px solid #d6d6d6; border-top: none; }

 .select .city ul li { padding-left: 10px; width: 188px; height: 40px; line-height: 40px; cursor: pointer; }
 $(function(){

 //模拟下拉框

     $('.select input').on('click',function(){

         if($('.select .city').is('.hide')){

             $('.select .city').removeClass('hide');

         }else{

             $('.select .city').addClass('hide');

         }

     })

     $('.select ul li').on('click',function(){

         $('.select input').val($(this).html());

         $('.select .city').addClass('hide');

         $('.select input').css('border-bottom','1px solid $d6d6d6');

     })

     $('.select ul li').hover(

         function(){

             $(this).css({'backgroundColor':'#fd9','font-size':'18px'});

         },function(){

             $(this).css({'backgroundColor':'#fff','font-size':'14px'});

         }

     )

 })

用div，ul，input模拟select下拉框的更多相关文章

  1. ul -- li 模拟select下拉框

    在写项目中 用到下拉框,一般用 <select name="" id=""> <option value=</option> &l ...

  2. jquery实现模拟select下拉框效果

    <IGNORE_JS_OP style="WORD-WRAP: break-word"> <!DOCTYPE html PUBLIC "-//W3C// ...

  3. jq插件又来了，模拟select下拉框，支持上下方向键哦

    好久没来了,更新下插件, 这个原理就是利用的 input[type='hidden']和自定义属性data-value捆绑传值操作的,可是设置默认选项,回调等参数,代码不多,比较简单,吼吼 (func ...

  4. div+css模拟select下拉框

    <!DOCTYPE html><html ><head lang="zh"> <meta http-equiv="Content ...

  5. [原创]HTML 用div模拟select下拉框

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML xmlns=" ...

  6. 模拟select下拉框、复选框效果

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  7. 联合县城市，采用ajax，而使用ul模拟select下拉

    接待处代码 js //采用jquery展示鼠标放到省ul下拉显示 $("#province").hover(function(){                          ...

  8. jQuery插件实现select下拉框左右选择_交换内容（multiselect2side）

    效果图: 使用jQuery插件---multiselect2side做法: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitio ...

  9. select下拉框左右变换

    效果图: 使用jQuery插件---multiselect2side做法: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 ...

随机推荐

  1. 后台子线程（非主线程）更新UI引起的警告

    一.问题描述 -(void)sendAsynchronousRequest { NSLog(@"%@",[NSThread currentThread]); [SVProgress ...

  2. 将项目导入eclipse中出现的jsp页面报错解决

  3. 轻轻送送为你的App加点特效

    前言 今天突然在一个应用中看到一个转场动画,蛮有意思的 退出动画 进入动画 ActivityOptionsCompat options = ActivityOptionsCompat.makeScal ...

  4. LINQ查询返回DataTable类型

    个人感觉Linq实用灵活性很大,参考一篇大牛的文章LINQ查询返回DataTable类型 http://xuzhihong1987.blog.163.com/blog/static/267315872 ...

  5. 用SSH登录局域网中使用网络设置为NAT的虚拟机中的linux

    环境描述: A客户机,安装有putty软件使用SSH方式登录B主机中的虚拟机中的linux:A机的网络地址:192.168.1.2 B主机为Windows7平台,B主机的网络地址为:192.168.1 ...

  6. CSS设置超出指定宽度自动换行

    一.背景 最近项目中有用到在div中显示用户反馈的信息,是指定宽度的div,超出要自动换行,开始写好后感觉应该没什么问题,后来自己随便输入测试数据的时候发现:如果是纯字母或者是纯数字就会出现超出了也不 ...

  7. [Android Pro] 网络流量安全测试工具Nogotofail

    reference to : http://www.freebuf.com/tools/50324.html 从严重的HeartBleed漏洞到苹果的gotofail 漏洞,再到最近的SSL v3 P ...

  8. Oracle BFILE备忘

    创建目录 create or replace directory exp_dir as '/tmp'; 赋权 grant read, write on directory exp_dir to PUB ...

  9. C#资源文件管理

    1.右键项目点属性; 2.点资源项,添加资源下拉框的添加现在文件,如下图: 3.直接上代码获取并复制到指定文件夹下: private void button1_Click(object sender, ...

  10. JS判断是否为IE浏览器 包含了IE11

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD ...