jQuery仿QQ好友列表

最新推荐文章于 2022-11-10 08:40:17 发布

孤独斗士

最新推荐文章于 2022-11-10 08:40:17 发布

阅读量932

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/gulanga5/article/details/107202843

版权

web前端专栏收录该内容

29 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		table{border:black 2px solid;width:100px;border-collapse:collapse;margin:15px 10px;width:10%;margin:20px 20px;}
		table td{border:black 1px solid;background-color:#E6E6E6;text-align:center;padding:5px 0;}
		table td div{background-color:#F2F2F2;text-align:left;line-height:28px;padding-left:14px;text-indent:padding-left:20px;}
		table td span{color:black;font-size:19px;width:100%;border:none;display:block;cursor:pointer;}
		table td a:hover{color:#0c0}
	</style>
	<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
	<script type="text/javascript">
		/** 通过jQuery实现仿QQ列表好友列表 */
		/** 通过javascipt实现仿QQ列表好友列表 */
		function openDiv(thisObj){
			//1.获取当前分组内好友列表div
			var odiv=thisObj.parentNode.getElementsByTagName("div")[0];//秦始皇，刘邦，李世民所在的div
			//2.判断当前分组div是展开还是关闭
			if(odiv.style.display=="block"){
				odiv.style.display="none";//3.如果当前div是打开的, 只需关闭该div即可
			}else{//4.如果当前div是关闭的, 先关闭其他分组的div, 再打开当前的  
				var aDiv=document.getElementsByTagName("div");
				//获取所有分组内的div(两个用来存储好友列表的div),遍历依次关闭所有分组
				for(var i=0;i<aDiv.length;i++){
					aDiv[i].style.display="none";
				}
				//再打开当前分组
				odiv.style.display="block";
			}
		}
		/** 通过jQuery实现仿QQ列表好友列表 
		function openDiv(thisObj){
			//在展开当前分组之前, 先关闭其他三个分组
			//>>选中其他三个分组并关闭.
			$(thisObj).parents("tr").siblings().find("div").hide();
			//点击当前分组, 切换分组的状态(如果展开则关闭, 如果关闭则展开)
			$(thisObj).next().toggle();
		}*/
	</script>
</head>
<body>
	<table border="" cellspacing="" cellpadding="">
		<tr><td>
				<span onclick="openDiv(this)">君王好友</span>
				<div style="display:none">
					秦始皇<br />
					刘邦<br />
					李世民<br />
					康熙<br />
				</div>
			</td>
		</tr>
		<tr>
			<td>
				<span onclick="openDiv(this)">三国好友</span>
				<div style="display:none">
					西施<br />
					貂蝉<br />
					杨贵妃<br />
					王昭君<br />
				</div>
			</td>
		</tr>
	</table>	
</body>
</html>

孤独斗士

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery仿QQ好友列表

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> <style type="text/css"> table{border:black 2px solid;width:100px;border-collapse:collapse;margin:15px 10px;width:10%;margin:20px 20px;} ta
复制链接

扫一扫