div 模拟<select>事件
IE7 下,不能够自定义<select>/<option>的样式,所以为了方便起见,用div可以进行模拟
<!doctype html>
<html>
<meta charset="utf-8">
<title>div模拟select</title>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<style type="text/css">
body,html,ul,li{padding:0;margin:0;list-style:none;}
.search_btn{margin:30px auto 0;display:block;width:97px; height:38px; line-height:38px; background:#CD0000; border-left:1px solid #CD0000; text-align:center; font-size:14px; color:#fff; cursor:pointer;position:relative;z-index:1}
.search_value{overflow:hidden;}
.search_value span{float:left;margin-left:12px;}
.search_value i{width:10px;height:6px;background:url(images/search_arrow.png) no-repeat;float:right;margin:17px 12px 0 0 }
.search_option{width:97px;line-height:30px;text-align:center;color:#000;background:#FCF3F3;display:none;position:absolute;z-index:3;top:38px;left:0;}
.search_option a{color:#000;display:block;text-decoration:none;}
.search_option a:hover{color:#CD0000;text-decoration:none;}
</style>
<body>
<div class="search_btn">
<div class="search_value"><span>个股体检</span><i></i></div><!--或者将图片作为search_value的背景图-->
<div class="search_option">
<a class="search_o" href="javascript:void(0)">个股体检</a>
<a class="search_o" href="javascript:void(0)">查行情</a>
</div>
</div>
<div class="search_btn">
<div class="search_value"><span>个股体检</span><i></i></div><!--或者将图片作为search_value的背景图-->
<div class="search_option">
<a class="search_o" href="javascript:void(0)">个股体检</a>
<a class="search_o" href="javascript:void(0)">查行情</a>
</div>
</div>
<script type="text/javascript">
$(".search_value").click(function (evt) {
evt.stopPropagation(); //阻止冒泡
$(this).next().show();
$(this).parent().css("z-index","2").siblings().css("z-index","1"); //当前选中的层级最高,防止IE7 下 遇到position:relative 被遮挡
$(this).parent().siblings().find(".search_option").hide(); //隐藏其他的下拉框选项
}); $(".search_option a").click(function(){
$(this).parent().prev().find("span").html($(this).html()); //选中内容填充
$(this).parents("search_btn").css("z-index","1");
$(this).parent().hide();
}); $("body").click(function(){ //点击页面其他部分,下拉框消失
$(".search_option").hide();
$(".search_btn").css("z-index","1");
});
</script>
</body>
</html>
注意事项:
1、如果有多个并列,互相之间会相互影响,IE7下,会被遮挡,为避免此问题,所有 设置层级为:1,选中时,层级改为2
2、<a>标签,缺少herf属性的话,IE7下将无hover效果
3、使用event.stopPropagation();阻止冒泡,event.preventDefault();阻止默认事件
div 模拟<select>事件的更多相关文章
- div模拟select/option解决兼容性问题及增加可拓展性
个人博客: http://mcchen.club 想到做这个模拟的原因是之前使用select>option标签的时候发现没有办法操控option的很多样式,比如line-height等,还会由此 ...
- 轻松使用div模拟select下拉菜单
没有办法,平时不是万不得已我是不喜欢去模拟各类控件的,一个是麻烦,二个是对性能也有些影响,还是原生的来的实在.老板昨天发话,必须模拟赶紧的,老外最喜欢简洁干净的风格,说的貌似都很在理的样子,业务部也是 ...
- [原创]HTML 用div模拟select下拉框
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML xmlns=" ...
- jquery实现模拟select下拉框效果
<IGNORE_JS_OP style="WORD-WRAP: break-word"> <!DOCTYPE html PUBLIC "-//W3C// ...
- layui问题之模拟select点击事件
一.问题 不操作页面,实现模拟select的事件,即,自动出现下拉框,自动点击下拉框的值,select文本框的值随之改变 二.经过 刚开始查看layui官方文档,发现仅仅只是有select监听事件,即 ...
- 用div,ul,input模拟select下拉框
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- jq插件又来了,模拟select下拉框,支持上下方向键哦
好久没来了,更新下插件, 这个原理就是利用的 input[type='hidden']和自定义属性data-value捆绑传值操作的,可是设置默认选项,回调等参数,代码不多,比较简单,吼吼 (func ...
- jquery用div模拟一个下拉列表框
原文 jquery用div模拟一个下拉列表框 今天分享一个用我自己用jquery写的,用div模拟下拉列表select,这个效果网上有很多,但是写一个有自己思路的代码效果,更有成就感,先看截图: 自我 ...
- 模拟select控件&&显示单击的坐标&&用户按下键盘,显示keyCode
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- Oracle Standard Error 列表
今天,我特意从网上找了一些,以及自己平时总结的,关于错误编号和说明,平时我们在写项目的时候,往往是可能会出现下面这些错误,例如:违反唯一约束,无效的会话ID,等等.希望对大家有点帮助!可以看看,如果有 ...
- Mono+Jexus部署C# MVC的各种坑
如果你看到这篇文章,先别急着动手,过完一遍,确定是你要的再动手. 别人提到的这里不赘述,只说查了好久才知道的. 1号坑:System.IO.FileNotFoundException Could no ...
- .NET Core dotnet 命令大全
dotnet 命令大全,让你理解dotnet 命令. 本文将以一个实例串起 dotnet 所有命令,让你玩转dotnet 命令. 本篇文章编写环境为windows 10 ,dotnet 命令同样适用于 ...
- 微软.Net 社区虚拟大会 -- 首日重点(dotnetConf 2016)
6月7日--9日,为期三天的微软.NET社区虚拟大会正式在 Channel9 上召开. 在 Scott Hunter, Miguel de Icaza (Xamarin CTO) , ScottHan ...
- 【腾讯Bugly干货分享】微信热补丁Tinker的实践演进之路
本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/57ad7a70eaed47bb2699e68e Dev Club 是一个交流移动 ...
- Hadoop学习笔记—22.Hadoop2.x环境搭建与配置
自从2015年花了2个多月时间把Hadoop1.x的学习教程学习了一遍,对Hadoop这个神奇的小象有了一个初步的了解,还对每次学习的内容进行了总结,也形成了我的一个博文系列<Hadoop学习笔 ...
- 用Go语言做产品半年的一些感觉
用Go语言做产品刚好半年,有一些感觉跟大家说道说道. 在使用Go之前,我常常想象,无法使用先进的Debug工具会对工作进度造成多么巨大的影响.甚至在Visual Studio的娇惯下认为,不能调试基本 ...
- iOS开发中静态库制作 之.a静态库制作及使用篇
iOS开发中静态库之".a静态库"的制作及使用篇 一.库的简介 1.什么是库? 库是程序代码的集合,是共享程序代码的一种方式 2.库的类型? 根据源代码的公开情况,库可以分为2种类 ...
- JavaScript具有自动垃圾回收机制
JavaScript具有自动垃圾回收机制 原理: 找出那些不再继续使用的变量,然后释放其占用的内存. 正常的生命周期: 局部变量指在函数执行的过程中存在.而在这个过程中,会为局部变量在栈或 ...
- JavaScript权威设计--JavaScript数组(简要学习笔记九)
1.数组的创建 如: var a=[1.1,null,"a"]; var b=[1, ,3]; //中间的那个元素是undefined var c=[ , , ] 这里c.leng ...