zoukankan      html  css  js  c++  java
  • 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;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{10px;height:6px;background:url(images/search_arrow.png) no-repeat;float:right;margin:17px 12px 0 0 }
    .search_option{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();阻止默认事件

  • 相关阅读:
    jQuery选择器大全(48个代码片段+21幅图演示)
    抽象和模型
    什么叫做精通,我来给大家解释一下
    设置浏览器固定大小的固定位置的方法
    selenium对浏览器属性操作的方法
    selenium 最大化浏览器是解决浏览器和驱动不匹配的方法如下
    java selenium手动最大化chrome浏览器的方法
    java selenium启动火狐浏览器报错:Cannot find firefox binary in PATH. Make sure firefox is installed. OS appears to be: VISTA Build info: version: '3.8.1', revision: '6e95a6684b', time: '2017-12-01T19:05:14.666Z
    mygenerator().next() AttributeError: 'generator' object has no attribute 'next'
    马的遍历 搜索
  • 原文地址:https://www.cnblogs.com/chaoli/p/5895641.html
Copyright © 2011-2022 走看看