JQ 折叠

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{padding: 0;margin: 0;}
			p{width:200px;height: 40px;background:lightblue;margin-top: 10px;}
			.item{width:200px;height: 80px;background: #17BEBB; display: none;}
		</style>
	</head>
	<body>
		<div>
			<p></p>
			<div class="item"></div>
			<p></p>
			<div class="item"></div>
			<p></p>
			<div class="item"></div>
			<p></p>
			<div class="item"></div>
		</div>
		<script src="js/jquery.min.js"></script>
		<script>
			$('p').click(function(){
				$('p').css('background','lightblue')
				$(this).css('background','pink')
				$('.item').slideUp()
				$(this).next().slideDown()
			})
		</script>
	</body>
</html>

猜你喜欢

转载自blog.csdn.net/qq_41619567/article/details/85115372
jq