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/ ...
随机推荐
- 【腾讯Bugly干货分享】OCS——史上最疯狂的iOS动态化方案
本文来自于腾讯Bugly公众号(weixinBugly),未经作者同意,请勿转载,原文地址:https://mp.weixin.qq.com/s/zctwM2Wf8c6_sxT_0yZvXg 导语 在 ...
- 使用Masstransit开发基于消息传递的分布式应用
Masstransit作为.Net平台下的一款优秀的开源产品却没有得到应有的关注,这段时间有机会阅读了Masstransit的源码,我觉得我有必要普及一下这个框架的使用. 值得一提的是Masstran ...
- 关于VS2015支持编译Linux程序的问题
现状 目前已经发布的VS2015中包括VS2015 Preview 以及 VS2015 CTP6,这两个版本均不支持直接编译C++代码为Linux程序,具体情况可以参考 Visual Studio 2 ...
- HTML5 <details> 标签
HTML5 中新增的<details>标签允许用户创建一个可展开折叠的元件,让一段文字或标题包含一些隐藏的信息. 用法 一般情况下,details用来对显示在页面的内容做进一步骤解释.其展 ...
- rsync 笔记之 list
通过 rsync --list-only 可以列出可用的 文件/目录或者 module 下面两者的含义是完全不同的: rsync --list-only root@192.168.4.140: 使用系 ...
- spring声明式事务管理总结
事务配置 首先在/WEB-INF/applicationContext.xml添加以下内容: <!-- 配置事务管理器 --> <bean id="transactionM ...
- Protobuf使用规范分享
一.Protobuf 的优点 Protobuf 有如 XML,不过它更小.更快.也更简单.它以高效的二进制方式存储,比 XML 小 3 到 10 倍,快 20 到 100 倍.你可以定义自己的数据结构 ...
- 学习日记-从爬虫到接口到APP
最近都在复习J2E,多学习一些东西肯定是好的,而且现在移动开发工作都不好找了,有工作就推荐一下小弟呗,广州佛山地区,谢谢了. 这篇博客要做的效果很简单,就是把我博客的第一页每个条目显示在APP上,条目 ...
- Vim常用命令
一.插入命令 a 在光标所在字符后插入A 在光标所在行尾插入i 在光标所在字符前插入I 在光标所在行首插入o 在光标下插入新行O 在光标上插入新行 二.定位命令 :set nu 设置行号:set no ...
- BootStrap_04之jQuery插件(导航、轮播)、以及Less
1.列偏移与列排序: ①列偏移:控制列出现的位置,某列偏移后,后序列会随之偏移--只能右偏移: col-lg/md/sm/xs-offset-*; ②列排序:控制某一列的位置,该列可以左(pull)右 ...