JQuery .slideToggle在表格上不流畅

Question

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

$(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);
  });
}); 

HTML：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>
      <table class="partTableContent">
        <tr>
          <td> Test1 </td>
        </tr>
        <tr>
          <td> Test2 </td>
        </tr>
      </table>
    </td>
  </tr>

</table>

但是这个动作的动画还有很多不足之处。隐藏的内容实时弹出，没有任何平滑的动画。我试过在.slideToggle中使用'slow'并改变表的宽度。但它没有用。有任何想法吗？

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