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分组列表效果相关推荐

android仿qq分组列表效果
推荐一个程序员开发.学习的好网站,www.it123.top 欢迎大家转发收藏. 效果图如下: 源码免费下载地址:http://download.csdn.net/detail/xuweilinjij ...
仿QQ分组列表（UITableView）
// // ViewController.m // 仿QQ分组列表 // // Created by lanqs on 15/1/26. // Copyright (c) 2015年 Tanqihon ...
Android 自定义RecycleView实现多级树(类似qq分组列表)
由于工作需要开发一个类似qq分组列表功能,所以就自定义RecycleView来实现功能效果图: 自定义View: import java.util.ArrayList; import java.ut ...
TableView实现QQ好友列表效果
概述:本文是黑马程序员UI视频教程第九天,QQ好友列表案例的总结该案例中主要涉及的知识点有:改变图片在UIButton中的平铺方式.UITableViewHeaderFooterView.设置按钮中 ...
详细讲解ExpandableListView显示和查询仿QQ分组列表用户信息
在我们的项目开发过程中,经常会对用户的信息进行分组,即通过组来显示用户的信息,同时通过一定的查询条件来显示查询后的相关用户信息,并且通过颜色选择器来设置列表信息的背景颜色. 其中借鉴xiaanming ...
iOS仿QQ分组效果
本篇主要讲解仿QQ分组效果的实现,通过本遍的学习,估计都可以自己去实现了(老司机可以),在这里只说仿QQ分组的效果,代码简单,逻辑清晰.其他的功能的可以自行添加,好了,进入主题吧. 效果图下面的是其 ...
Unity UGUI_DropDown控件模拟QQ分组的使用心得
关于 DropDown 很好用,但是也有很多坑,对比专门的软件开发工具,unity关于DropDown的功能有限,下面总结一下我本次使用DropDown的一些心得 DropDown下拉选项 DropD ...
14_自定义ItemDecoration实现qq好友列表分组效果
14_自定义ItemDecoration实现qq好友列表分组效果一.先上效果二.RecyclerView实现简单分组 RecyclerView比较常规的用法,显示多item布局,直接上代码: pu ...
android 仿qq好友动态,Android UI仿QQ好友列表分组悬浮效果
本文实例为大家分享了Android UI仿QQ好友列表分组悬浮效果的具体代码,供大家参考,具体内容如下楼主是在平板上測试的.图片略微有点大,大家看看效果就好接下来贴源代码: PinnedHeade ...

jQuery实现QQ分组列表效果

jQuery实现QQ分组列表效果相关推荐

最新文章

热门文章