用li模拟select实现下拉框

最新推荐文章于 2023-09-22 16:20:54 发布

helmsgao

最新推荐文章于 2023-09-22 16:20:54 发布

阅读量6.1k

点赞数

CC 4.0 BY-SA版权

分类专栏：网页开发

本文链接：https://blog.youkuaiyun.com/love_gaohz/article/details/50562052

网页开发专栏收录该内容

48 篇文章

订阅专栏

这篇博客介绍了如何使用HTML、CSS和JavaScript（jQuery）来模拟实现一个下拉选择框，通过将select元素替换为li元素，实现了自定义样式和交互效果。内容包括设置样式、添加事件监听以及动态显示和隐藏下拉选项列表。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>