先看效果：（hi~~hi~~）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<title>Nearth</title>
<style type="text/css">
body{
background-color: lightpink;
}
#u li{
margin-bottom: 10px;
background-color: orange;
font-size: 20px;
font-weight: border;
cursor: pointer;
}
#u li ul{
list-style-type: none;
margin:0;
padding: 0;
}
#u li ul li{
background-color: lightpink;
}
img{
height:200px;
width:200px;
}
</style>
<script>
$(function(){
$("#u>li>ul>li").hide();
$("#u>li").click(function(){
$(this).siblings("li").children("ul").find("li").hide(500);
$(this).children("ul").find("li").show(500);
})
})
</script>
</head>
<body>
<h1>Nearth----QQ美女联系列表(好友面板切换案列)</h1>
<hr style="size:3px;color: #FF4500;">
<div style="width:200px;height:600px;border:2px solid red;border-radius: 2px;background-image: url(0.jpg);">
<h1 style="font-size: 30px;color: aquamarine;">我的美女朋友</h1>
<ul id="u"style="list-style-type: none;margin:0;padding: 0;text-align: center;">
<li>
精品美女
<hr >
<ul>
<li>name:西施 price:20$<img src="1.jpg"></li>
</ul>
</li>
<li>
性感美女
<hr >
<ul>
<li>name:貂蝉 price:20$<img src="2.jpg"></li>
</ul>
</li>
<li>
清纯美女
<hr >
<ul>
<li>name:王昭君 price:20$<img src="3.jpg"></li>
</ul>
</li>
<li>
绝世美女
<hr >
<ul>
<li>name:杨玉环 price:20$<img src="4.jpg"></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
(注意：图片自己去找~~~)
我感觉学习这东西蛮好玩的~~~~~~~~~~~~~小主人，你觉得呢~~~~~~
