2

我正在尝试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？如果是这样，有没有办法做幻灯片动画？

这是一个小提琴：

http://jsfiddle.net/BRuvf/

4

2 回答 2

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/

于 2012-09-22T23:27:41.387 回答
0

这解决了你的问题

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/

于 2012-09-22T23:16:58.237 回答