代码：
<!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>
