JQuery学习笔记19——表格展开关闭
1.这个效果的关键是表格的结构：
Code如果我们想一打开页面就是一个折叠的效果可以
1
<tr class="parent" id="row_01"><td colspan="3">前台设计组</td></tr>
2<tr class="child_row_01"><td>张山</td><td>男</td><td>浙江宁波</td></tr>
3<tr class="child_row_01"><td>张山</td><td>男</td><td>浙江宁波</td></tr>
4<tr class="child_row_01"><td>王五</td><td>男</td><td>浙江宁波</td></tr>
5<tr class="parent" id="row_02"><td colspan="3">前台设计组</td></tr>
6<tr class="child_row_02"><td>张山</td><td>男</td><td>浙江宁波</td></tr>
7<tr class="child_row_02"><td>张山</td><td>男</td><td>浙江宁波</td></tr>
8<tr class="child_row_02"><td>张山</td><td>男</td><td>浙江宁波</td></tr>
2.根据样式名称获取单击的分类行：<tr class="parent" id="row_01"><td colspan="3">前台设计组</td></tr>2
<tr class="child_row_01"><td>张山</td><td>男</td><td>浙江宁波</td></tr>3
<tr class="child_row_01"><td>张山</td><td>男</td><td>浙江宁波</td></tr>4
<tr class="child_row_01"><td>王五</td><td>男</td><td>浙江宁波</td></tr>5
<tr class="parent" id="row_02"><td colspan="3">前台设计组</td></tr>6
<tr class="child_row_02"><td>张山</td><td>男</td><td>浙江宁波</td></tr>7
<tr class="child_row_02"><td>张山</td><td>男</td><td>浙江宁波</td></tr>8
<tr class="child_row_02"><td>张山</td><td>男</td><td>浙江宁波</td></tr>$('tr.parent')
3.给获取的分类行添加单击事件：（1）给当前分类行添加/删除高亮（2）隐藏/显示所谓子行$(this).toggleClass("selected");
$(this).siblings(".child_"+this.id).toggle();
需要注意的是：.siblings(".child_row_01")样式名称前要加"."。1
$('tr.parent').click(function(){
2
$(this).toggleClass("selected").siblings(".child_"+this.id).toggle();
3
})
完整代码：$('tr.parent').click(function(){
2
$(this).toggleClass("selected").siblings(".child_"+this.id).toggle();3
})Code1$('tr.parent').click(function(){
2 $(this).toggleClass("selected").siblings(".child_"+this.id).toggle();
3}).click();
$('tr.parent').click(function(){2
$(this).toggleClass("selected").siblings(".child_"+this.id).toggle();3
}).click();