jquery实现折叠菜单

最新推荐文章于 2022-05-25 19:12:26 发布

zhaohehe123

最新推荐文章于 2022-05-25 19:12:26 发布

阅读量631

点赞数 1

分类专栏： jquery

本文链接：https://blog.csdn.net/zhaohehe123/article/details/8852554

版权

jquery 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<html>
<head>
<style>
.parent{cursor:pointer;background:#FFF90F}
</style>
<meta charset="utf-8"/>
<script type="text/javascript" src="script/jquery-1.4.2.min.js"></script>
<script>
//1,toggle()合成事件
/*$(function(){
$("tr.parent").toggle(function(){
$(this).siblings(".child_"+this.id).hide();
},function(){
$(this).siblings(".child_"+this.id).show();
});
})*/
//2,动画toggle()
$(function(){
$("tr.parent").click(function(){
$(this).siblings(".child_"+this.id).toggle();
})
})
</script>
</head>
<body>
<table align="center">
<thead><tr><th>姓名</th><th>性别</th><th>居住地</th></tr></thead>
<tbody>
<tr class="parent" id="row_01"><td>前台设计小组</td></tr>
<tr class="child_row_01"><td>    张三</td><td>男</td><td>上海</td></tr>
<tr class="child_row_01"><td>    李四</td><td>女</td><td>深圳</td></tr>
<tr class="child_row_01"><td>    王五</td><td>男</td><td>北京</td></tr>
<tr class="parent"><td>前台开发小组</td></tr>
<tr><td>    赵六</td><td>女</td><td>保定</td></tr>
<tr><td>    赵钱</td><td>男</td><td>石家庄</td></tr>
<tr><td>    孙丽</td><td>女</td><td>香港</td></tr>
<tr class="parent"><td>后台设计小组</td></tr>
<tr><td>    jk</td><td>男</td><td>保定</td></tr>
<tr><td>    hy</td><td>男</td><td>石家庄</td></tr>
<tr><td>    csdn</td><td>男</td><td>北京</td></tr>
</tbody>
</table>
</body>
</html>

zhaohehe123

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery实现折叠菜单

.parent{cursor:pointer;background:#FFF90F}//1,toggle()合成事件/*$(function(){$("tr.parent").toggle(function(){$(this).siblings(".child_"+this.id).hide();},function(){$(this).siblings("
复制链接

扫一扫

专栏目录