点击(此处)折叠或打开

<!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 Select美化演示示例</title>
<style>
*{
margin:0px;
padding:0px;
list-style:none;
text-decoration:none;
}
.jsSelect{
width:200px;
height:22px;
float:left;
margin:0 0 0 32px;
display:inline;
}
.jsSelect ul{
width:198px;
height:20px;
overflow:hidden;
background:#FFF;
float:left;
border:1px solid #7F9DB9;
position:absolute;
}
.jsSelect ul .s{
display:block;
background:url(/jscss/demoimg/201204/DropDown-i.jpg) no-repeat right;
cursor:default;
}
.jsSelect ul li{
width:167px;
height:20px;
line-height:20px;
padding:0 26px 0 5px;
font-size:14px;
}
.jsSelect ul li a{
color:#000;
}
</style>
<script type=\"text/jscript\" src=\"/ajaxjs/jquery-1.6.2.min.js\"></script>
<script type=\"text/javascript\">
$(document).ready(function(){
$(\"body #Select\").each(function(i){
i= i+1
this.id = \"Select\" + i;
var SumimasenSelect = $(\"#Select\"+i)
$(SumimasenSelect).find(\"ul li:first\").click(function(){
$(this).css(\"border-bottom\",\"1px solid #7F9DB9\")
$(this).parent(\"ul\").css(\"height\",100)
$(this).siblings(\"ul li:not(.s)\").mouseenter(function(){
$(this).css(\"background\",\"#316AC5\").css(\"color\",\"#FFFFFF\")
});
$(this).siblings(\"ul li:not(.s)\").mouseleave(function(){
$(this).css(\"background\",\"none\").css(\"color\",\"inherit\")
});
$(this).siblings(\"ul li:not(.s)\").click(function(){
$(this).parent(\"ul\").css(\"height\",20)
var cdContent = $(this).text()
$(SumimasenSelect).find(\"ul li:first\").text(cdContent)
});
$(this).parent(SumimasenSelect).mouseleave(function(){
$(this).css(\"height\",20)
});
});
});
});
</script>
</head>
<body>
<div class=\"jsSelect\" id=\"Select\">
<ul>
<li class=\"s\">我是第一项</li>
<li>我是第一项</li>
<li>我是第二项</li>
<li>我是第三项</li>
<li>我是第四项</li>
</ul>
</div>
<div class=\"jsSelect\" id=\"Select\">
<ul>
<li class=\"s\">我是第一项</li>
<li><a href=\"#\">我是第一项</a></li>
<li><a href=\"#\">我是第二项</a></li>
<li><a href=\"#\">我是第三项</a></li>
<li><a href=\"#\">我是第四项</a></li>
</ul>
</div>
</body>
</html>

ITPub博客

jQuery Select美化演示示例

最新文章