第3课--3.1QQ列表展开收缩扩展_html实现qq分组展开收缩效果-优快云博客

本文链接：https://blog.youkuaiyun.com/wcf1991/article/details/78369883

本文介绍了一个使用纯JavaScript和HTML实现的QQ列表展开收缩效果的案例。该案例通过简单的DOM操作实现了列表项的展开与收缩功能，并为列表项内的元素添加了鼠标悬停效果。此外，还提供了基本的样式设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>QQ列表展开收缩扩展</title>
	<style>
		body,ul,p{
			padding:0;
			margin:0;
		}
		body{
			background-color:#666;
		}
		li{
			list-style:none;
		}
		#wrap{
			width:300px;
			height:400px;
			margin:30px auto;
			
		}
		#wrap p{

			font:26px/30px "宋体";
			text-indent:1em;
			background:#aaa url(../img/ico1.gif) no-repeat 8px center;
		}
		#list{
			border:1px solid #999;
		}
		#list ul{

			display:none;
		}
		#list .active{
			background:#ccc url(../img/ico2.gif) no-repeat 8px center;
		}
		#wrap li{		
			border-bottom:1px solid #bbb;
			font:16px/26px"宋体";
			text-indent:2em;
			background-color:#f1f1f1;
		}
		#wrap li:hover{
			background-color:#fff;
		}
		#wrap .li_style{
			background-color:#fff;
		}
	</style>

	<script>
	window.onload = function(){
		var oList = document.getElementById("list");

		var oP = oList.getElementsByTagName("p");
	
		var oUl = oList.getElementsByTagName("ul");

		var aLi = null;

		var arrLi = [];
		
		for(var i = 0;i < oP.length;i++){
			oP[i].index = i;
			oP[i].onclick = function(){
				if(this.className == ""){
					for(var i = 0;i < oP.length;i++){
							oP[i].className = "";
							oUl[i].style.display = "none";
						}
					oUl[this.index].style.display = "block";
					this.className = "active";
				}else{
					oUl[this.index].style.display = "none";
					this.className = "";
				}		
			}
		}	

		for(var i = 0;i < oUl.length;i++){
			aLi = oUl[i].getElementsByTagName("li");
			for(var j = 0;j < aLi.length;j++){
				arrLi.push(aLi[j]);
			}
		}

		for(var i = 0;i < arrLi.length;i++){
			arrLi[i].onclick = function(){
				if(this.className ==""){
					for(var i = 0;i < arrLi.length;i++){
						arrLi[i].className = "";
					}
					this.className = "li_style";
				}else{
					this.className = "";
				}			
			}
		}
	}
	</script>
</head>
<body>
	<div id = "wrap">
		<ul id = "list">
			<li>
				<p>我的好友</p>
				<ul>
					<li>张三</li>
					<li>张三</li>
					<li>张三</li>
					<li>张三</li>
				</ul>
			</li>
			<li>
				<p>企业好友</p>
				<ul>
					<li>李四</li>
					<li>李四</li>
					<li>李四</li>
					<li>李四</li>
				</ul>
			</li>
			<li>
				<p>黑名单</p>
				<ul>
					<li>张小三</li>
					<li>李小四</li>
				</ul>
			</li>
		</ul>
	</div>
</body>
</html>