一、实现效果
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();
分成两句会比较容易理解,比我自己的代码简单