Question

我希望隐藏小提琴中表格的最后两行，并在点击“查看更多”时以动画方式拉伸。我已经设法使用代码 - here's a 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)
    });
})

Answer 1

你不能slideToggle表格行，它不能很好地运作。我所做的是将每个td内容括在div中，并slideToggle对每个div进行处理。请注意，这应该有点慢，具体取决于单元格数和客户端计算机。

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

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

折叠动画效果不起作用（反而溶解） - 小提琴里面

1 个答案: