Question

我在外部表中有一个内部表，其中包含来自外部的数据。我决定隐藏它并只显示用户按下＆＃39;展开＆＃39;按钮。我已经使用像这样的JQuery slideToggle函数完成了它

PREFIX

HTML：

$(document).ready(function() {
  $('.partTableContent').hide();
  $('.expandButton').click(function() {
    // .parent() selects the A tag, .next() selects the P tag
    $(this).closest('tr').next(' tr').find('table').slideToggle(200);
  });
});

但是这个动作的动画还有很多不足之处。隐藏的内容实时弹出，没有任何平滑的动画。我曾试图使用“慢”＃39;在.slide中切换并更改表格的宽度。但它没有用。有什么想法吗？

Answer 1

将您的内部表放在<div>内，并将该类提供给该div class="partTableContent"。查看以下代码是否有效：

<table class="partsTable">

    <tr>

        <td class="sideForPartsTable" width="5%">
            <button class="expandButton">Expand button</button>
        </td>
        <td class="sideForPartsTable">Title + sum1 + sum2</td>
        <td class="sideForPartsTable" width="5%">edit</td>
        <td class="sideForPartsTable" width="5%">remove</td>

    </tr>

    <tr>
        <td>
            <div class="partTableContent">
                <table>
                    <tr>
                        <td> Test1 </td>
                    </tr>
                    <tr>
                        <td> Test2 </td>
                    </tr>
                </table>
            </div>
        </td>
    </tr>

</table>

然后，改变

$(this).closest('tr').next(' tr').find('table').slideToggle(200);

到

$('.partTableContent').slideToggle(200);

Working Fiddle

JQuery .slideToggle在表格上并不平滑

1 个答案: