javascript – JQuery .slideToggle在表格上不流畅

2023年8月8日 201次阅读

我在外表中有一个内部表,其中包含来自外部的数据.我决定隐藏它并仅显示用户按下“展开”按钮.我已经使用像这样的
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’并改变表的宽度.但它没有用.有任何想法吗？

最佳答案 将内部表放在< 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

点赞