利用jquery模拟select效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,target-densitydpi=high-dpi,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/> <title>利用jquery模拟select效果</title> <style> .pr-select, .please-choose, .select-ul li { width: 100% } .pr-select { position: relative; } .please-choose { border-radius: 5px; border: 1px solid #C4C4C4; height: 28px; line-height: 28px; } .div_select { position: relative; } .jack-tipping-cam { position: absolute; top: 10px; right: 10px; font-style: normal; width: 0; height: 0; border: 5px solid transparent; border-top-color: #000; } .select-ul { list-style: none; display: none; width: 100%; position: absolute; left: 0; top: 0; margin: 0; padding: 0; } .select-ul li { line-height: 28px; width: 100%; } .select-blue { background: #09F; } </style> <script src="jquery-1.11.3.js"></script> <script> $(document).ready(function () { $("#ul-select li").mouseover(function () { $("#ul-select li").removeClass("select-blue"); $(this).addClass("select-blue"); }) $(".div_select").click(function () { $("#ul-select").show(); }) $("#ul-select li").click(function () { $("#ul-select").hide(); $("#please-choose").val(($(this).text())); }) }) </script> </head> <body> <form> <div class="pr-select"> <div class="div_select"> <input type="text" class="please-choose" id="please-choose" placeholder="请选择"> <i class="jack-tipping-cam"></i> </div> <ul class="select-ul" id="ul-select"> <li class="select-blue">河南省</li> <li>北京市</li> <li>安徽省</li> <li>重庆市</li> <li>四川省</li> <li>河北省</li> <li>天津市</li> </ul> </div> </form> </body> </html>
利用jquery模拟select效果的更多相关文章
- WPF中利用RadialGradient模拟放大镜效果
原文:WPF中利用RadialGradient模拟放大镜效果 --------------------------------------------------------------------- ...
- Jquery学习笔记:利用jquery获取select下拉框的值
jquery不是特别熟练,每次使用不常用的就要百度,特地记录下来. 我的下拉框是: <div class="form-group"> <select class= ...
- jquery模拟checkbox效果,以及background-size在jquery中的使用。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
- jquery模拟下拉框
<!DOCTYPE html> <html lang="en"> <head> <title>jquery模拟SELECT框< ...
- jquery实现模拟select下拉框效果
<IGNORE_JS_OP style="WORD-WRAP: break-word"> <!DOCTYPE html PUBLIC "-//W3C// ...
- jQuery插件:模拟select下拉菜单
没搞那么复杂,工作中,基本够用.. <!doctype html> <html> <head> <meta charset="utf-8" ...
- 利用jquery+iframe做一个ajax上传效果
以下是自学it网--中级班上课笔记 网址:www.zixue.it html页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict ...
- jQuery效果之封装模拟placeholder效果,让低版本浏览器也支持
页面中的输入框默认的提示文字一般使用placeholder属性就可以了,即: <input type="text" name="username" pla ...
- 利用jQuery实现回收站删除效果
jQuery是一款非常强大的Javascript脚本库,我们开发者喜欢jQuery的原因除了它代码简洁外,更多的是因为jQuery插件非常丰富.今天我们用一个示例来解说jQuery是如何实现拖拽的. ...
随机推荐
- PCA降维2
前言 本文为模式识别系列第一篇,主要介绍主成分分析算法(Principal Component Analysis,PCA)的理论,并附上相关代码.全文主要分六个部分展开: 1)简单示例.通过简单的例子 ...
- resful风格
package com.atguigu.springboot.controller; import com.atguigu.springboot.dao.DepartmentDao; import c ...
- Data too long for column
一篇文章的正文,需要很多字数,默认就是255,不够 @Lob @Basic @Type(type = "text") @Column(name = "detail&quo ...
- Java室内最短路径搜索(支持多楼层)
修改了上次的代码,现在支持室内的多楼层情况下的最短路径搜索,还是使用A*算法,把在GraphAdjList中VNode没有利用起来的data字段作为我们存储楼层属性的位置. 实际上是我偷懒了,正常情况 ...
- js日期格式化Date
使用Date类进行日期格式化. 1 输入“yyyy-MM-dd hh:mm:ss”格式的String字符串,返回字符串 做一个简单判定,在当日显示为几点几分,同年为月日,不同年显示年月 functio ...
- oracle中准确控制job的下次运行时间(next date)
用过ORACLE的JOB的朋友也许都能够感觉到它的强大,和JAVA中的quartz有异曲同工之妙,可以少了很多的重复劳动:但是也会有许多问题,就是执行时间段和执行时间比较不容易确定. 这其实都是我们还 ...
- Find- Linux必学的60个命令
1.作用 find命令的作用是在目录中搜索文件,它的使用权限是所有用户. 2.格式 find [path][options][expression] path指定目录路径,系统从这里开始沿着目录树向下 ...
- PHP--封装干净利落的输出dump()函数
/** * 打印函数 * */ if (! function_exists ( 'dump' )) { function dump($var, $exit = true) { echo '<pr ...
- pyd打包补充
网上说的将python代码,通过Cython打包成pyd的教程挺多,好处也多,主要有两个: 1.隐藏代码 2.加速运行速度 补充两点: 1.打包脚本配置 __build__.py from distu ...
- 转:linux select 多路复用机制
源地址:http://blog.csdn.net/turkeyzhou/article/details/8609360 2013-02-25 14:18 442人阅读 评论(1) 收藏 举报 目录 ...