jQuery实现QQ分组列表效果

一、实现效果

1.未点击分组标题之前，所有成员都隐藏

2.点击分组标题之后，隐藏的要显示，已经显示的要隐藏

3.在点击一个分组标题时，其他已经展开的分组，要隐藏

二、代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
	<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			//siblings()可找到该元素的同胞元素
			var $hide=$(".group").siblings();
			//设置所有成员隐藏
			$hide.hide();
			//设置标题点击时显示“手”的CSS
			$(".group").css("cursor","pointer");
			//设置class="group"的分组标题标签的点击事件
			$(".group").click(function() {
				//将这个点击标签下的同胞元素赋给一个新的变量
				var $hide=$(this).siblings();
				//假如其同胞元素是显示的，就将其隐藏，反之让其显示，并且把其他分组下的同胞元素隐藏
				if($($hide).is(":visible")){
					$hide.hide();
				}else{
					$hide.show();
					//除了本分组外的，其他分组的同胞元素隐藏 
					$(".group").not(this).siblings().hide();
				}
			});
		});
		
		
	</script>
	
	<style type="text/css">
		div *{
			display:block;
			width:200px;
		}
		div span{
			background-color : #0f0;
		}
	</style>
</head>
<body>
	
		<div>
			<span class="group">我的好友</span>
			<a>人寿保险</a>
			<a>富德人寿</a>
		</div>
		<div>
			<span class="group">特别关心</span>
			<a>无脸怪</a>
			<a>宝宝</a>
		</div>
		
</body>
</html>

三、老师的代码(我觉得我不是很懂)

$(document).ready(function(){
			$("a").hide();
			$("span").css("cursor","pointer").click(function() {
				$(this).nextAll().toggle().parent().siblings().children().filter("a").hide();
				//span的所有兄弟隐藏
				/* $(this).nextAll().toggle();
				$(this).parent().siblings().children().filter("a").hide(); */
				/*nextAll() 后面的所有兄弟*/
				/*
				toggle()  切换 Hide() 和 Show()检查每个元素是否可见。如果元素已隐藏，则运行 show()。
				如果元素可见，则元素 hide()。这样就可以创造切换效果。
				*/
				/*siblings() 所有兄弟  */
				/*parent()  父元素  */
				/*children([...])   获得所有的子元素  */
				/*filter()  筛选出与指定表达式匹配的元素集合  */
			});
		});

这一句，可以拆分成，注释的两句

$(this).nextAll().toggle().parent().siblings().children().filter("a").hide();

即

$(this).nextAll().toggle();
$(this).parent().siblings().children().filter("a").hide();

分成两句会比较容易理解，比我自己的代码简单

jQuery实现QQ分组列表效果

猜你喜欢