css jq模拟下拉

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/a772116804/article/details/80053587
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
<title>模拟下拉</title>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
/* select */
.select{position:relative;float:left;margin:0 10px;}
.select dt{height:28px;display:inline-block;border:1px solid #d2ccc4;background:#fcfcfb url(ico.gif) no-repeat 97px center;text-align: center;line-height:28px;font-weight:bold;padding-left:10px;cursor:pointer;width:90px;padding-right:12px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;position:relative;z-index:99;}
.select dt:hover,.select dt.cur{border:1px solid #409DFE;box-shadow:0 0 3px #409DFE;}
.select dd{position:absolute;left:0;top:29px;border:1px solid #d2ccc4;background:#fff;display:none;}
.select dd ul{padding:4px;width:104px;max-height:250px;overflow:auto;}
.select dd ul li a{line-height:28px;display:block;padding:0 8px;text-align: center;}
.select dd ul li a:hover{background:#f5f5f5;}
</style>
</head>
<body>
<div class="demo">	
	<dl class="select">
		<dt>请选择</dt>
		<dd>
			<ul>
				<li><a href="#">下拉1</a></li>
				<li><a href="#">下拉2</a></li>
				<li><a href="#">下拉3</a></li>
				<li><a href="#">下拉4</a></li>
				<li><a href="#">下拉5</a></li>
				<li><a href="#">下拉6</a></li>
			</ul>
		</dd>
	</dl>
</div>
<script type="text/javascript">
$(function(){
	$(".select").each(function(){
		var s=$(this);
		var z=parseInt(s.css("z-index"));
		var dt=$(this).children("dt");
		var dd=$(this).children("dd");
		var _show=function(){
		dd.slideDown(300);
		dt.addClass("cur");
		s.css("z-index",z+1);
		};   
		//展开效果
		var _hide=function(){
		dd.slideUp(300);
		dt.removeClass("cur");
		s.css("z-index",z);
		};    
		//关闭效果
		dt.click(function(){
			dd.is(":hidden")?_show():_hide();
		});
		dd.find("a").click(function(){
		dt.html($(this).html());_hide();
		});     //选择效果(如需要传值,可自定义参数,在此处返回对应的“value”值 )
		$("body").click(function(i){ !$(i.target).parents(".select").first().is(s) ? _hide():"";});
	})
})
</script>
</body>
</html>

 

阅读更多 登录后自动展开
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页