<!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" />
<title>jquery表单点击滑动下拉框美化 - 网页模板</title>
<script type="text/javascript" src="js/jquery-1.7.min.js"></script>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font-size:12px;background:#efeeeb;color:#666;}
a,a:hover{text-decoration:none; color:#666;}
.demo{width:300px;margin:40px auto 0 auto;}
/* select */
.select{position:relative;float:left;margin:0 10px;}
.select dt{height:28px;display:inline-block;border:1px solid #d2ccc4;background:#fcfcfb url(images/ico.gif) no-repeat 97px 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;}
.select dd ul li a:hover{background:#f5f5f5;}
</style>
<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(200);dt.addClass("cur");s.css("z-index",z+1);}; //展开效果
var _hide=function(){dd.slideUp(200);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>
</head>
<body>
<div class="demo">
<dl class="select">
<dt>下拉</dt>
<dd>
<ul>
<li><a href="#">12131</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>
<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>
<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>
<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>
<br><br><br><br>
<div style="text-align:center;margin:300px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p><br>
<p>来源：<a href="http://www.moobnn.com/" target="_blank">网页模板</a></p>
</div>
</body>
</html>
jquery表单点击滑动下拉框美化.zip
版权申诉
54 浏览量
2022-11-19
19:49:45
上传
评论
收藏 46KB ZIP 举报
jquery表单点击滑动下拉框美化.zip （4个子文件） 
jquery表单点击滑动下拉框美化 jiaoben2005 images 
ico.gif 38B
index.html 4KB js 
jquery-1.7.min.js 92KB
jquery表单点击滑动下拉框美化.jpg 18KB资源评论
