<!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. js的json转换

    静态页面是: data:[{ value:2.5, itemStyle:{ normal:{color:'#4a90e2'} } },{ value:2.5, itemStyle:{ normal:{ ...

  2. 【python】入门学习（四）

    函数: 定义函数 #area.py from math import pi def area(radius): """Return the area of a circl ...

  3. ASINetworkQueues(经典2)

    ASINetworkQueues, 它的delegate提供更为丰富的功能 提 供的更多的回调方法如下: a,requestDidStartSelector,请求发起时会调此方法,你可以在此方法中跟据 ...

  4. CSS语法小记

    一.CSS语法结构 语法:选择符{属性:值} 例如:body{font-size:12px;} 参数说明: 1.选择符(Selector):指明这组样式所要针对的对象.可以是一个XHTML标签,例如h ...

  5. Android笔记：获取屏幕信息

    像素密度(dpi) float xdpi = getResources().getDisplayMetrics().xdpi;float ydpi = getResources().getDispla ...

  6. Mysql undo与redo Log

    http://mysql.taobao.org/monthly/2015/04/01/ http://www.cnblogs.com/Bozh/archive/2013/03/18/2966494.h ...

  7. NYOJ题目34韩信点兵

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAskAAAHiCAIAAACV1MbSAAAgAElEQVR4nO3dPXLjONeG4W8TyrUQx1 ...

  8. PHP之MVC项目实战(三)

    本文主要包括以下内容 标准错误错误处理 http操作 PDO 文件操作 标准错误错误处理 PHP在语法层面上发生的错误 两个过程: 触发阶段(发生一个错误) 处理阶段(如何处理该错误) 触发阶段 系统 ...

  9. UVA 10405最长公共子序列

    裸最长公共子序列,直接贴代码 #include<cstdio> #include<iostream> #include<algorithm> #include< ...

  10. 【数据库】 Sqlserver 2008 error 40出现连接错误的解决方法

    经常要连接到远程数据库上,因此常常碰到这个错误,然后又屡次忘记解决方法,所以今天坐下笔迹,好下次能快速回忆起来. 一.首先检查数据库的TCP/TP是否启动 1.启动Sql server配置管理器 2. ...