<!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. 手把手教你实现折线图之------安卓最好用的图表库hellocharts之最详细的使用介绍

    因为项目需要搞一个折线图,按照日期显示相应的成绩,所以有了本文. 以前用过一次XCL-chart,但是感觉只适合固定图表,不去滑动的那种,因为你一滑动太卡了你懂得(毕竟作者好久没更新优化了),拙言大神 ...

  2. 【leetcode】Single Number II （medium） ★ 自己没做出来....

    Given an array of integers, every element appears three times except for one. Find that single one. ...

  3. xp系统打开软件程序总是弹出警告窗口，很烦人对不，怎么办呢？进来看

    为了不浪费比较着急的朋友的的时间,先把解决方案说了,下面我在细说: 细说: 今天装了个xp的虚拟机,为了不在xp里重复装真机(win7的)里已经有的软件,就把我的工具盘共享给了虚拟机,大部分软件都可以 ...

  4. iOS 没有安装对应客户端，不应显示对应的图标

    现在很多APP为了让用户更加快捷方便注册,都会使用第三方进行登录,例如QQ/微信/淘宝等.但是上线审核被拒,大致会出现以下内容: Additionally, we found that your ap ...

  5. IOS - 首次启动程序出现的画面介绍

    1.在appdelegate.m中找到 “application:didFinishLaunchingWithOptions:” 通过NSUserDefaults 来进行判断 if (![[NSUse ...

  6. PHP如何随机获取一个二维数组中的一个值

    获取一个数组: $awardid_list=pdo_fetchall('select id from '.tablename($this->table_award)); 这是微擎的写法哈,意思就 ...

  7. [Android Pro] linux下查看一个文件的属性（ls，lsattr，file，stat）

    reference to : http://blog.chinaunix.net/uid-28458801-id-4615294.html 查看文件属性有多种方法,且这些方法中偏向不同,具体如下: 1 ...

  8. 3ds max的动画输出

    转自:http://zhidao.baidu.com/link?url=qc3vV2A9-ydb-YiVKoF7z_bIIRlmLSkyl8DcuWNYn8FaBxa2BDVLwuGPX_jYWxbw ...

  9. linux vi 中按了ctrl+s后没法退出

    linux vi 中按了ctrl+s后无法退出 Linux 中使用vi编辑文件 不小心按了Ctrl + S (习惯了) 结果终端就跟死了一样, 解决办法: Ctrl+Q

  10. 55. Jump Game leetcode

    55. Jump Game Total Accepted: 95819 Total Submissions: 330538 Difficulty: Medium Given an array of n ...