<!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. 利用冒泡对List排序

    SysMenu是List集合中的类型,在这是一个菜单实体. public List<SysMenu> selfMenuSort(List<SysMenu> list) { fo ...

  2. 【XLL API 函数】xlfUnregister (Form 2)

    此函数可以被 Excel 已经载入的 XLL 或 DLL 调用.它等效于宏表函数 UNREGISTER. xlfUnregister 有两种调用形式: 形式1:Unregister 单独的命令或函数 ...

  3. ios 宏定义 系统版本 判定

    当需要判断iOS系统版本的时候,相信很多人都会这么干: #define SystemVersion [[UIDevice currentDevice] systemVersion].floatValu ...

  4. 好用的php类库和方法

    1, /** * 将一个平面的二维数组按照指定的字段转换为树状结构 * * 用法: * @code php * $rows = array( * array('id' => 1, 'value' ...

  5. Excel去重

    在excel2007中,数据——>数据工具——>删除重复项也可使用高级筛选:数据——>排序和筛选中的高级——>弹出高级筛选对话框,设置列表区域和条件区域,并勾选“选择不重复记录 ...

  6. 细谈WEB标准

    最近有些朋友很是疑惑web标准是什么,我在这里先做一个总结,有更好的见解的可以私信给我! 首先切入正题之前先谈一下什么叫DOCTYPE,DOCTYPE是document type(文档类型)的简写,主 ...

  7. 模拟赛1101d1

    完美的序列(sequence)Time Limit:1000ms Memory Limit:64MB题目描述LYK 认为一个完美的序列要满足这样的条件:对于任意两个位置上的数都不相同.然而并不是所有的 ...

  8. 四、优化及调试--网站优化--Yahoo军规上

    什么是Yahoo军规?即如何提高网站速度的知识. 具体如下: 1.尽量减少HTTP请求个数——须权衡 什么是http请求:从客户端到服务器端的请求消息.包括消息首行中,对资源的请求方法,资源的标识符及 ...

  9. PHP定时器实现每隔几秒运行一次

    php是服务器端脚本了并不像js那样有专业的settimeout函数来定时执行了,但只要浏览器不关闭各阶层是可以做到了,下面一起来看看. 下面写个简单例子来讲解这个方法. <?php ignor ...

  10. php同步mysql两个数据库中表的数据

    分别创建两个数据库和两张表study库-zone表teaching库-area表 //****SQL脚本****// 1.创建teaching数据库area数据表 create database te ...