$("table td div").css("display","none");
等价于
$("table td div").hide();
$(thisobj).next("div").css("display","block");
等价于
$(thisobj).next("div").show();
/*********************************************************************/
$(thisobj).parent().parent().siblings("tr").find("div").hide();
此例等价于
$(thisobj).parents("tr").siblings("tr").find("div").hide();
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>好友列表</title>
<style type="text/css">
body{
font-family: "微软雅黑";
}
table {
border:#0099FF 1px solid;
width:100px;
border-collapse:collapse;
margin:15px 10px;
width:10%;
}
table td{
border:#0066FF 1px solid;
background-color:#6f5f3e;
text-align:center;
padding: 5px 0px;
}
table td div {
background-color:#FFFF99;
text-align:left;
line-height: 24px;
padding-left: 14px;
}
table td a:link, table td a:visited {
color:#00ffFF;
text-decoration:none;
}
table td a:hover {
color:#00CC00;
}
/*
使用display属性:如果取值为none就是隐藏标签。
*/
table td div { display:none; }
.open { display:block; }
.close { display:none; }
</style>
<!--引入jquery的js库-->
<script src="../js/jquery-1.4.2.js"></script>
<script type="text/javascript">
/* --通过jQuery实现访QQ列表好友分组-- */
/*点击分组名称可以展开好友列表*/
/*点击分组先关闭其他分组，再展开当前分组*/
/*点击分组：如果分组是展开的，点击则关闭*/
function openDiv(thisobj){
//先关闭所有分组，再展开当前分组
//$("table td div").css("display","none");
//$("table td div").hide();
//$(thisobj).parent().parent().siblings("tr").find("div").hide();
$(thisobj).parents("tr").siblings("tr").find("div").hide();
//获取当前分组下的div元素并设置为显示
//$(thisobj).next("div").css("display","block");
//$(thisobj).next("div").show();
$(thisobj).next("div").toggle();
}
</script>
</head>
<body>
<table>
<tr>
<td>
<a href="javascript:void(0)" onclick="openDiv(this)">君王好友</a>
<div>
秦始皇<br />
刘邦<br />
李世民<br />
康熙<br />
</div>
</td>
</tr>
<tr>
<td>
<a href="javascript:void(0)" onclick="openDiv(this)">三国好友</a>
<div>
刘备<br />
关羽<br />
张飞<br />
赵云<br />
</div>
</td>
</tr>
<tr>
<td>
<a href="javascript:void(0)" onclick="openDiv(this)">美女好友</a>
<div>
西施<br />
貂蝉<br />
杨贵妃<br />
王昭君<br />
</div>
</td>
</tr>
<tr>
<td>
<a href="javascript:void(0)" onclick="openDiv(this)">IT好友</a>
<div>
马云<br />
李开复<br />
俞敏洪<br />
黎活明<br />
</div>
</td>
</tr>
</table>
</body>
</html>
