js实现仿QQ联系人列表效果 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			ul{
				list-style: none;
			}
			.wrap{
				width: 200px;
				margin: 20px auto;
			}
			#tlist>li{
				background: #FFDBB9;
				cursor: pointer;
				font-size: 20px;
				line-height: 2;
			}
			#tlist>li>i{
				display: inline-block;
				width: 0;
				height: 0;
				line-height: 0;
				border: 5px solid #6D6F6F;
				border-color: #6D6F6F transparent;
				border-bottom: 0;
				vertical-align: middle;
				margin: 0 5px;
				transform: rotate(-90deg);
				transition: all 1s;
			}
			/* #tlist>li:hover i{
				transform: rotate(0deg);
			} */
			
			.flist{
				background: #FFFAF1;
				display: none;
			}
		</style>
		
		<script type="text/javascript">
			window.onload = function(){
				var tLi = document.getElementsByClassName('tli');
				var fUl = document.getElementsByClassName('flist');
				var ti = document.getElementsByTagName('i');
				// console.log(tLi,fUl,ti);
				for(var i = 0; i < tLi.length; i++){
					tLi[i].index = i;
					tLi[i].onclick = function(){
						for(var i = 0; i < tLi.length; i++){
							ti[i].style.transform = "rotate(-90deg)";
							console.log(ti[i])
							fUl[i].style.display = 'none';
						}
						ti[this.index].style.transform = "rotate(0deg)";
						fUl[this.index].style.display = 'block';
					}
				}
			}
		</script>
		
	</head>
	<body>
		<div class="wrap">
			<ul id="tlist">
				<li class="tli"><i></i>我的好友
					<ul class="flist">
						<li class="fli">小张</li>
						<li class="fli">小代</li>
						<li class="fli">小孙</li>
					</ul>
				</li>
				<li class="tli"><i></i>我的家人
					<ul class="flist">
						<li class="fli">小张</li>
						<li class="fli">小代</li>
						<li class="fli">小孙</li>
					</ul>
				</li>
				<li class="tli"><i></i>我的同学
					<ul class="flist">
						<li class="fli">小张</li>
						<li class="fli">小代</li>
						<li class="fli">小孙</li>
					</ul>
				</li>
			</ul>
		</div>
	</body>
</html>

 

posted @ 2020-03-22 17:09  JackieDYH  阅读(6)  评论(0)  编辑  收藏  举报  来源