Question

我正在尝试slideToggle() table没有设定高度。这可能吗？

<div class="container">
  <h3>Title</h3>
  <p class="expand-close"><a href="">Expand/Close</a></p>
  <table>
    <tbody>
      <tr>
        <td>Head 1</td>
        <td>Stuff</td>
      </tr>
      <tr>
        <td>Head 2</td>
        <td>More stuff</td>
      </tr>
    </tbody>
  </table>
</div>

我的jQuery：

$("p.expand-close").parent().click(function (event) {
    $(this).parent().find("table").slideToggle(400);
    event.preventDefault();
});

CSS：

table {display：none;}

我假设没有幻灯片动画是因为table没有设置高度？如果是这样，有没有办法进行幻灯片动画？

这是一个小提琴：

http://jsfiddle.net/BRuvf/

Answer 1

slideToggle将display: table属性添加到您的表中，因为它不是块元素，您看不到动画效果。您可以将表格放在div标签中，然后将其滑动：

<div id='table'>
   <table>
     // ..
   </table>
</div>

#table {
    display: none;
}

$("p.expand-close a").click(function (event) {
    $(this).parent().next().slideToggle(400);
    event.preventDefault();
});

http://jsfiddle.net/NrkCg/

Answer 2

这可以解决您的问题

<强> CSS

table{
    display:block;
}
.container table{
    display: none;
}

<强>的jQuery

$("p.expand-close").parent().click(function (event) {
     var block = $(this).parent().find("table");

    if(block.is(':visible'))
        $(block).slideUp(400);
    else
       $(block).slideDown(400, function(){$(this).css('display', 'block')});

    event.preventDefault();
});

http://jsfiddle.net/2G2mD/

slideToggle（）和具有未知高度的表标记

2 个答案: