JQ坑1

最新推荐文章于 2020-12-30 16:23:36 发布

spfLinux

最新推荐文章于 2020-12-30 16:23:36 发布

阅读量276

点赞数

分类专栏： jQuery 文章标签： JQ 坑

jQuery 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.dropdown{
			width: 64px;
			height: 20px;
		}
		.dropdown a{
			text-decoration: none;
			color: #000;
			display: inline-block;
		}
		.dropdown>a{
			border: 1px solid #000;
			padding: 6px 12px;
		}
		.dropdown-menu{
			width: 105px;
			list-style: none;
			margin:0;
			padding: 0;
			box-shadow: 5px 5px 6px #000;
			height: 0;
			overflow: hidden;
			transition: .2s;
		}
		.dropdown-menu a{
			padding: 6px 20px;
			width: 160px;
		}
		.dropdown-menu li:hover{
			background: #ddd;
		}
	</style>
</head>
<body>
	<h1>下拉菜单</h1>
	<div class="dropdown">
		<a data-toggle="dropdown" href="">Dropdown</a>
		<ul class="dropdown-menu">
			<li><a href="#">选项1</a></li>
			<li><a href="#">选项2</a></li>
			<li><a href="#">选项3</a></li>
			<li><hr></li>
			<li><a href="#">选项4</a></li>
		</ul>
	</div>
	
	<script src="js/jquery.min.js"></script>
	<script>
		$("[data-toggle=dropdown]").parent()
		.mouseover(function(){
			//this会指冒泡出的那个，不会变|也是指.前的对象(parent())
			//console.log("this="+this.className);
			$(this).children(".dropdown-menu").css({
				height:152,
				border:"1px solid #000"
			});
		}).mouseout(function(){
			$(this).children(".dropdown-menu").css({
				height:0,
				border:""
			});
		})
	</script>
</body>
</html>