Question

我有一个表隐藏了一半数据，可以通过按下按钮进行扩展。我遵循模式here。这是我的HTML：

<button class="toggleBtn">Hide/Show</button>
<table>
<tbody>
<tr>
    <td>Session Name : </td>
    <td>Generic name here</td>
</tr>
<tr>
    <td>Jump Date : </td>
    <td>12/25/2011</td>
</tr>
</tbody>
<tbody class="hiddenJumpSessionDetails" style="display:none;">

    <tr>
        <td>Created On : </td>
        <td>12/24/2011</td>
    </tr>
    <tr>
        <td>Inspector : </td>
        <td>Gadget</td>
    </tr>
    <tr>
        <td>Other Notes : </td>
        <td></td>
    </tr>
</tbody>

这是我的javascript：

<script>
$(document).ready(function()
{
    $(".toggleBtn").click(function()
    {
        $(".hiddenJumpSessionDetails").slideToggle();
    })
})

当隐藏部分向上/向下滚动时，表格就像有3列一样。第一列中的第二列向右移动，第二列中的第二列稍微靠近左侧移动。滑动完成后，整个第二列移回适当的位置。

是什么让表格以这种方式运作？

注意：当隐藏的第二列中没有数据时，不会发生此效果。如果'12 / 24/2011'和'Gadget'被取出，一切看起来都不错。

Answer 1

看起来你没有在桌子或列上设置任何宽度，所以它会很流畅。

尝试设置一些宽度。

Answer 2

通过在display:block元素中设置tbody并将元素隐藏在脚本中，我能够正常工作：

<tbody style="display:block;" >
.
.
.
<tbody class="hiddenJumpSessionDetails" style="display:block;">

$(document).ready(function()
{
    $(".hiddenJumpSessionDetails").hide();
    $(".toggleBtn").click(function () {
      $(".hiddenJumpSessionDetails").slideToggle("slow");
    });
});

以下是一个示例：http://jsfiddle.net/aa7Kv/

表列在jQuery.slide（）期间发生了变化

2 个答案: