JQuery学习之手风琴

JQuery学习之手风琴_第1张图片
代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JQuery学习</title>
		<style type="text/css">
			*{
				margin:0;
				padding:0
			}
			ul {
			    list-style-type: none;
			}
			.container{
				width: 200px;
				height: 130px;
				margin: 100px auto;
			}
			.container li{
				border: red 1px solid;
			}
			.container div{
				width: 200px;
				height: 200px;
				background-color: aquamarine;
				display: none;
			}
			.grouptitle{
				display: block;
				cursor: pointer;
				width: 200px;
				height: 30px;
				line-height: 30px;
			}
		</style>
	</head>
	<body>
		<div class="container"> 
			<ul>
				<li>
					<span class="grouptitle">第一个标签</span>
					<div>第一个你好帅!!!</div>
				</li>
				<li>
					<span class="grouptitle">第二个标签</span>
					<div>第二个你好帅!!!</div>
				</li>
				<li>
					<span class="grouptitle">第三个标签</span>
					<div>第三个你好帅!!!</div>
				</li>
				<li>
					<span class="grouptitle">第四个标签</span>
					<div>第四个你好帅!!!</div>
				</li>
			</ul>
		</div>
	</body>
</html>
<script src="./js/jquery.min.js"></script>
<script>
	$(function(){
		var i=0;
		$('li').click(function(){
			$(this).children('div').show().parent().siblings('li').children('div').hide();
		});
		$('ul').mouseleave(function(){
			$(this).find('div').hide();
		});
	});
</script>

你可能感兴趣的:(JQuery)