<!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. linux线程的实现

    首先从OS设计原理上阐明三种线程:内核线程.轻量级进程.用户线程 内核线程 内核线程就是内核的分身,一个分身可以处理一件特定事情.这在处理异步事件如异步IO时特别有用.内核线程的使用是廉价的,唯一使用 ...

  2. c++从文件中读取特定字符串问题的总结

    1.每次从文件中读出一行作为一个字符串 可以用ifstream()函数来打开一个文件,然后用while加getline()函数即可每次读一行文件,直到文件结束 #include<unistd.h ...

  3. c# 类型拷贝

    /// <summary> /// 类 名:EntityHelper /// 类 说 明:实体操作方法类 /// : /// 创建时间:2013/8/12 /// </summary ...

  4. 【python】Python遍历dict的key最高效的方法是什么？

    来源:https://segmentfault.com/q/1010000002581747 方法一:直接遍历 速度快 for key in _dict: pass 方法二:iterkeys() 速度 ...

  5. Windows下批处理执行MySQL脚本文件

    转载至http://my.oschina.net/u/660932/blog/117929 一. @echo offSetlocal enabledelayedexpansion::CODER BY ...

  6. iOS 十六进制和字符串转换

    NSString *dictString = [dict JSONFragment];//组合成的. dictString==={"content":"Sadgfdfg& ...

  7. Android touch事件的派发流程

    Android TouchEvent事件传递机制 通俗易懂,能够了解Touch事件派发的基本流程. Android中的dispatchTouchEvent().onInterceptTouchEven ...

  8. GBDT原理实例演示 2

        一开始我们设定F(x)也就是每个样本的预测值是0(也可以做一定的随机化) Scores = { 0, 0, 0, 0, 0, 0, 0, 0}     那么我们先计算当前情况下的梯度值     ...

  9. 如何使用Case进行简单判断

    Case具有两种格式.简单Case函数和Case搜索函数. --简单Case函数 CASE sex ' THEN '男' ' THEN '女' ELSE '其他' END --Case搜索函数 ' T ...

  10. HTTPS的一些疑问解答

    PHP写的网站怎么用https访问,具体要怎样 这跟用什么语言写的网站没有关系,可以去申请个快速的SSL证书,一年也就几十块. 开启apache server的ssl,自己做个免费的ssl证书或者去申 ...