星空网 > 软件开发 > Java

div 模拟select事件

IE7 下,不能够自定义<select>/<option>的样式,所以为了方便起见,用div可以进行模拟

<!doctype html><html><meta charset="utf-8"><title>div模拟select</title><script type="text/javascript" src='/images/loading.gif' data-original="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 >	<div ><span>个股体检</span><i></i></div><!--或者将图片作为search_value的背景图-->	<div >	 <a href="javascript:void(0)">个股体检</a>	 <a href="javascript:void(0)">查行情</a>	</div></div><div >	<div ><span>个股体检</span><i></i></div><!--或者将图片作为search_value的背景图-->	<div >	 <a  href="javascript:void(0)">个股体检</a>	 <a  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

div
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

#1 Best Seller---狗咬玩具---美国专利侵权预警:https://www.ikjzd.com/articles/139096
耐克×宜动×泰尼卡“行业高位”的秘诀是什么?:https://www.ikjzd.com/articles/139097
几个“另类”的中国外贸服饰网站:https://www.ikjzd.com/articles/139098
互联网高端马靴品牌【Tecovas】:https://www.ikjzd.com/articles/139099
跨境电商旺季宣告结束 ,下面该忙点什么 ?:https://www.ikjzd.com/articles/13910
防侵权预警186:定位器在美国市场的外观专利情况:https://www.ikjzd.com/articles/139100
深圳玉龙公园簕杜鹃花海花期时间+门票+交通:https://www.vstour.cn/a/365174.html
出境旅游预订须知:https://www.vstour.cn/a/365175.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流