您的位置：首页 > 其它

用li模拟select实现下拉框

2016-01-22 15:05 357 查看

<!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>
<title></title>
<style>
body {padding:10px;}
* {margin:0; padding:0; font-size:12px;}
ul,li
{
list-style-type:none;
}
.Select_box {
width:150px;
border:1px solid #ccc;
padding-right:20px;
padding-left:10px;
position:relative;
}
#fisrt {
cursor:pointer;
display:block;
line-height:25px;
width:100%;
height:25px;

text-align:center;
background:url('ico-arrow.png') no-repeat 100% 50%;
}
.Select_box ul li {
cursor:pointer;
}
.son_ul {
width:179px;
position:absolute;
left:0;
top:25px;
border:1px dashed #ccc;
background:url(bg.png) no-repeat 0 0;
z-index:100;
}
.son_ul li {
display:block;
line-height:25px;
padding-left:0px;
width:179px;
z-index:100;
background:url('icon.png') no-repeat 0% 60%;

}
.son_ul li:hover {
background:red url('icon.png') no-repeat 0% 60%;
}
.son_ul span {
cursor:pointer;
padding-left:40px;
}
</style>
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.son_ul').hide(); //初始ul隐藏
$('.Select_box span').click(function () { //鼠标移动函数
$(this).parent().find('ul.son_ul').slideDown();  //找到ul.son_ul显示
//$(this).parent().find('li').hover(function () { $(this).addClass('hover') }, function () { $(this).removeClass('hover') }); //li的hover效果
$(this).parent().hover(function () { },
function () {
$(this).parent().find("ul.son_ul").slideUp();
}
);
}, function () { }
);
$('ul.son_ul li').click(function () {
$(this).parents('li').find('#fisrt').html($(this).html());
$(this).parents('li').find('ul').slideUp();
});
}
);
</script>
</head>
<body>
<form id="form1" runat="server">
<ul id="main_box">
<li class="Select_box">
<span id="fisrt">   请选择...</span>
<ul class="son_ul">
<li><span>选项一</span></li>
<li><span>选项二</span></li>
<li><span>选项三</span></li>
<li><span>选项四</span></li>
<li><span>选项五</span></li>
</ul>
</li>
</ul>
</form>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航