用slideToggle()展开和隐藏导致布局变形咋办
上面是初始状态，下面是展开和缩放的状态。内容的宽度变长了。但是用toggle()的话，不加参数没问题，加了毫秒参数也会出同样问题。
<script src="../scripts/jquery-1.3.1.js"></script>
<script>
$(function(){
$("tr.parent").click(function() {
$(this).toggleClass('selected');
$(this).siblings('.child_' + this.id).slideToggle();
});
})
</script>
<style>
table { border:0; border-collapse:collapse;}
th {border-bottom:1px solid black; font:bold 12px/17px Arial; text-align: left; padding: 4px; width: 100px;}
td {font:normal 12px/17px Arial; padding: 2px; width: 100px;}
.parent {background: #FFF38F; cursor: pointer;}
.odd { background: #FFFFEE;}
.selected { background: #FF6500; color:#fff;}
</style>
<body>
<table>
<thead>
<tr><th>姓名</th><th>性别</th><th>暂住地</th></tr>
</thead>
<tbody>
<tr class="parent" id="row_01"><td colspan="3">前台设计组</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" id="row_02"><td colspan="3">前台开发组</td></tr>
<tr class="child_row_02"><td>王五</td><td>男</td><td>湖南长沙</td></tr>
<tr class="child_row_02"><td>找六</td><td>男</td><td>浙江温州</td></tr>
<tr class="parent" id="row_03"><td colspan="3">后台开发组</td></tr>
<tr class="child_row_03"><td>Rain</td><td>男</td><td>浙江杭州</td></tr>
<tr class="child_row_03"><td>MAXMAN</td><td>女</td><td>浙江杭州</td></tr>
</tbody>
</table>
</body>
展开
收起
1
条回答
写回答
写回答
-
原因清楚了，JQ里面toggle()实现的方式是
display:none和table-row切换，slideToggle()是display:none和block切换，table里面的tr用block的时候会导致布局错误。解决方法就是改display的值。2019-07-17 19:19:03赞同 展开评论 打赏
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
相关问答
问答排行榜
最热
最新
推荐问答
