jQuery实现QQ分组列表效果

雨点打透心脏的1/2处 2022-05-09 19:48 322阅读 0赞

**一、实现效果**

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();

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