列表展开收缩效果

最新推荐文章于 2023-07-11 11:54:11 发布

口耳戈是个生僻字

最新推荐文章于 2023-07-11 11:54:11 发布

阅读量1.8k

点赞数

分类专栏： javascript实例

本文链接：https://blog.csdn.net/qq_37199582/article/details/79439420

版权

javascript实例专栏收录该内容

13 篇文章 0 订阅

订阅专栏

该效果模仿qq列表，点击展示具体联系人，再次点击则关闭列表

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>无标题文档</title>
		<style>
			* {
				margin: 0;
				padding: 0;
				list-style: none;
				font-family: "微软雅黑";
			}
			
			#friend {
				width: 300px;
				margin: 50px auto 0;
				border-left: 1px solid #ccc;
				border-right: 1px solid #dadada;
			}
			
			#friend h2 {
				width: 270px;
				height: 35px;
				line-height: 35px;
				padding-left: 30px;
				background: url(img/icon_lft.png) 10px no-repeat #74a400;
				color: #fff;
				font-size: 16px;
				font-weight: 100;
				cursor: pointer;
			}
			
			#friend h2.hover {
				background: url(img/icon.png) 10px no-repeat #74a400;
			}
			
			#friend li {
				margin-bottom: 1px;
			}
			
			#friend li ul li {
				width: 270px;
				padding-left: 30px;
				height: 30px;
				line-height: 30px;
				border-bottom: 1px solid #ccc;
				cursor: pointer;
			}
			
			
			#friend li ul .hover {
				background: #EFF4E0;
			}
			
			#friend li ul .active {
				background: #FFC;
			}
			
			#friend li ul {
				display: none;
			}
			
			#friend li ul.hover {
				display: block;
			}
		</style>
		<script>
			window.onload = function() {
				var oUl = document.getElementById('friend');
				var aLi = oUl.getElementsByTagName('li');
				var aH = oUl.getElementsByTagName('h2');
				var aUl = oUl.getElementsByTagName('ul');
				var aLi = null;
				var arrLi = [];

				// 用于存放id=friend的ul标签里面的li标签
				for(var i = 0; i < aUl.length; i++) {
					aLi = aUl[i].getElementsByTagName('li');
					for(var j = 0; j < aLi.length; j++) {
						arrLi.push(aLi[j]);  //将获取到的节点存入数组里面
					}
				}

				for(var i = 0; i < aH.length; i++) {
					//设置index属性的值
					aH[i].index = i;
					//每一个h2标签被点击
				    aH[i].onclick = function() {
				    	
                       //没有class就给他类名hover，反之清空类名
						if(this.className == '') {
							this.className = 'hover';
							aUl[this.index].className = 'hover';
						} else {
							this.className = '';
							aUl[this.index].className = '';

							var aLi = aUl[this.index].getElementsByTagName('li');
							for(var i = 0; i < aLi.length; i++) {
								aLi[i].className = '';
								aLi[i].onOff = true;//设置标量值
							}

						}

					};
				}

				for(var i = 0; i < arrLi.length; i++) {

					arrLi[i].onOff = true;
                    //标量值为true则代表鼠标在上面，添加对应样式
					arrLi[i].onmouseover = function() {
						if(this.onOff) {
							this.className = 'active';
						}
					};
					//设置鼠标移出移除样式
					arrLi[i].onmouseout = function() {
						if(this.onOff) {
							this.className = '';
						} else {
							this.className = 'hover';
						}
					};

					arrLi[i].onclick = function() {

						for(var i = 0; i < arrLi.length; i++) {
							if(this != arrLi[i]) {
								arrLi[i].className = '';
								arrLi[i].onOff = true;
							}
						}

						if(this.onOff) {
							this.className = 'hover';
							this.onOff = false;
						} else {
							this.className = '';
							this.onOff = true;
						}
					};
				}

			}
		</script>
	</head>

	<body>
		<ul id="friend">
			<li>
				<h2>我的好友</h2>
				<ul>
					<li>张一</li>
					<li>张二</li>
					<li>张三</li>
				</ul>
			</li>
			<li>
				<h2>我的同事</h2>
				<ul>
					<li>张四</li>
					<li>张五</li>
					<li>张六</li>
					<li>张七</li>
					<li>张八</li>
				</ul>
			</li>
			<li>
				<h2>我的同学</h2>
				<ul>
					<li>张九</li>
					<li>张十</li>
					<li>张十一</li>
				</ul>
			</li>
		</ul>
	</body>

</html>