javascript - 用slideToggle()展开和隐藏导致布局变形咋办-PHP中文网问答

上面是初始状态，下面是展开和缩放的状态。内容的宽度变长了。但是用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>

全部回复(4)

黄舟2017-04-10 16:46:24 4楼

原因清楚了，JQ里面toggle()实现的方式是display:none和table-row切换，slideToggle()是display:none和block切换，table里面的tr用block的时候会导致布局错误。解决方法就是改display的值。

赞 +0

添加回复

PHP中文网2017-04-10 16:46:24 3楼

slide 会把该元素设置成 display: block，而 <table /> 的 display: table。所以最好是为 <table /> 增加一个 wrap，如：<p id="table-wrap" />，再指定其 max-width 值。对其做 slideToggle 动画就不会出现宽度的问题了

黄舟2017-04-10 16:46:24 2楼

展开的元素应当使用绝对定位。

迷茫2017-04-10 16:46:24 1楼

我将代码考下来试了一下，并没有问题。

我加载的jqury文件是jqury-1.8.3.min.js。