折叠动画效果不起作用(改为溶解）-在内部拖动

Collapsing animation effect not working (dissolving instead) - Fiddle inside

本文关键字：拖动 在内部 动画 不起作用 折叠      更新时间：2023-09-26

我希望fiddle中表格的最后两行隐藏起来，并在单击"查看更多"时使用动画进行拉伸。我已经设法用代码做到了这一点——这是一个小提琴

但是动画正在溶解而不是拉伸。我应该添加什么（最好使用最小代码）才能获得这样的效果？

此外，HTML、CSS和Jquery方面，在这种情况下，整个代码通常是最佳实践吗

例如，我应该将.hidden类应用于tr吗？

我曾尝试将这两行封装在一个DIV中，并对其应用.hidden类，但没有成功。

CSS：

.clk {
    cursor: pointer;
}
.clk:hover {
    color:#903;
    text-decoration:underline;
}
table, tr, td, th {
    border-collapse: collapse;
    border-spacing: 0;
    margin: 0;
    padding: 0;
}
.hidden {
    display: none;
}

HTML:

  <table border="1">
    <col style="width:115px;" />
    <col style="width:125px;" />
    <col style="width:145px;" />
    <col style="width:125px;" />
    <col style="width:190px;" />
    <thead>
      <tr>
        <th>1</th>
        <th>2</th>
        <th>3</th>
        <th>4</th>
        <th>5</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><span class="clk">See More</span></td>
        <td>a</td>
        <td>b</td>
        <td>c</td>
        <td>d</td>
      </tr>
      <tr class="hidden">
        <td>a</td>
        <td>a</td>
        <td>b</td>
        <td>c</td>
        <td>d</td>
      </tr>
      <tr class="hidden">
        <td>a</td>
        <td>a</td>
        <td>b</td>
        <td>c</td>
        <td>d</td>
      </tr>
    </tbody>
  </table>

JS:

$(document).ready(function(){
    $('.clk').click(function(){
        $('.hidden').toggle(700)
    });
})

不能slideToggle一个表行，它不能很好地工作。我所做的是将每个td内容封装在一个div中，并将这些div中的每一个都封装为slideToggle。请注意，这应该有点慢，具体取决于单元格的数量和客户端计算机。

$('.clk').click(function(){
    $('.hidden').toggle(700) // Fade the rows
    $('.hidden td div').slideToggle(700) // Slide the contents
});

工作演示：http://jsfiddle.net/fzmuyp0u/

相关文章：