jQuery实现下拉选项框

最新推荐文章于 2022-06-15 13:48:34 发布

Serena_tz

最新推荐文章于 2022-06-15 13:48:34 发布

阅读量525

点赞数

分类专栏： jQuery 文章标签： jquery

本文链接：https://blog.csdn.net/Serena_tz/article/details/115254316

版权

jQuery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

html文件：


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{padding: 0px; margin: 0px;}
			.content{
				width: 100%; 
				height: 500px;
				/* background: #F27729; */
			}
			.content .select{
				width: 300px; 
				height: 40px; 
				background: #FFFFFF; 
				margin: 0px auto;
				position: relative;
				cursor: pointer;
				border: #666666 solid 1px;
			}
			.content .select::after{
				content: "";
				display: block;
				width: 10px;
				height: 10px;
				border-left: 1px solid #666;
				border-bottom: 1px solid #666;
				top: 12px;
				right: 12px;
				position: absolute;
				transform: rotate(-46deg);
				transition: all .3s ease-in;
			}
			.content .select p{
				width: 300px;
				line-height: 40px; 
				font-size: 16px;
				font-family: "microsoft yahei";
				color: #666666;
				padding: 0px 15px;
			}
			.content .select ul{
				width: 300px;
				display: block;
				font-size: 16px;
				background: #FFFFFF;
				position: absolute;
				top: 40px;
				left: 0px;
				max-height: 0px;
				overflow: hidden;
				transition: max-height .3s ease-in;
				border: #666666 solid 1px;
			}
			.content .select ul li{
				width: 100%;
				height: 30px;
				line-height: 30px;
				padding: 0px 15px;
				list-style: none;
				color: #666666;
			}
			.content .select ul li.Selected{
				background: yellowgreen;
				color: #FFFFFF;
			}
			.content .select ul li:hover{
				background: #D0D0D0;
			}
			@-webkit-keyframes slide-down{
				0%{transform: scale(1,0);}
				25%{transform: scale(1,1.2);}
				50%{transform: scale(1,0.85);}
				75%{transform: scale(1,1.05);}
				100%{transform: scale(1,1);}
			}
			
			.content .select.open ul{
				max-height: 250px;
				transform-origin: 50% 0;
				-webkit-animation: slide-down .5s ease-in;
				transition: max-height .2s ease-in;
			}
			.content .select.open::after{
				transform: rotate(134deg);
				transition: all .3s ease-in;
				top: 18px;
				
			}
		</style>
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
		<script>
			$(function(){
				$(".select p").click(function(e){
					$(".select").toggleClass('open');
					e.stopPropagation();
				});
				
				$(".content .select ul li").click(function(e){
					var _this=$(this);
					$(".select > p").text(_this.attr('data-value'));
					_this.addClass("Selected").siblings().removeClass("Selected");
					$(".select").removeClass("open");
					e.stopPropagation();
				});
				
				$(document).on('click',function(){
					$(".select").removeClass("open");
				})
				
			});
		</script>
	</head>
	<body>
		<div class="content">
			<div class="select">
				<p data-value="所有选项">所有选项</p>
				<ul>
					<li data-value="所有选项" class="Selected">所有选项</li>
					<li data-value="Html">Html</li>
					<li data-value="Html5">Html5</li>
					<li data-value="JavaScript">JavaScript</li>
					<li data-value="Jquery">Jquery</li>
					<li data-value="Java">Java</li>
					<li data-value="c#">c#</li>
				</ul>
			</div>
		</div>
	</body>
</html>

Serena_tz

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery实现下拉选项框

html文件：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> *{padding: 0px; margin: 0px;} .content{ width: 100%; height: 500px; /* background: #F27729; */ }
复制链接

扫一扫

专栏目录