jQuery模仿QQ列表
2017-08-22 本文已影响16人
幻凌风
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="script/jquery-3.2.1.js"></script>
<script>
$(function () {
//初始列表隐藏
$("ul").hide();
$("span").css("cursor", "pointer").click(function () {
//被点击的span后面的br后面的ul元素显示
$(this).next().next().slideDown(1000)
//找到ul的众多兄弟中的ul兄弟
.siblings("ul").slideUp(1000);
})
})
</script>
</head>
<body>
<span>我的好友</span><br />
<ul id="friend">
<li>中国</li>
<li>巴基斯坦</li>
<li>俄罗斯</li>
<li>尼泊尔</li>
<li>南非</li>
</ul>
<span>我的敌人</span><br />
<ul id="enemy">
<li>美国</li>
<li>日本</li>
<li>韩国</li>
<li>印度</li>
</ul>
</body>
</html>
