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 に答える