jQuery实现仿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;
			}

			.flist li:hover {
				background: #0084BB;
			}

			.wrap .active {
				display: block;
			}
			.wrap #tlist .act {
				transform: rotate(0deg);
			}
		</style>
		<script src="js/jquery-1.10.1.js"></script>
		<script type="text/javascript">
			$(function(){
				$('.tli').click(function(){
					$(this).children('i').toggleClass('act');
					$(this).find('.flist').toggleClass('active');
				})
				
			})
		</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>

$(function() {
$('.tli').each(function(idx,item){
console.log(idx,item,this)
//添加点击事件
$(this).click(function(){
	console.log(1)
	$('.tli i').css('transform','rotate(-90deg)');
	$('.tli .flist').css({'display':'none'});
	$(this).children('i').css('transform','rotate(0deg)')
	$(this).find('.flist').css({'display':'block'});
})