4

次のコードを使用して行を下にスライドしますが、jQuerydisplay: blockは、本来あるべき行に強制的に適用しtable-row、スタイルを壊します。

フィドル： http： //jsfiddle.net/7Ay3z/

完了後に手動で設定しましtable-rowたが、それは恐ろしいことです。どうすればこれを回避できますか？

<style>
table {
    margin: 25px;
}
tr {
    background-color: #c00;
    color: #fff;
    border: 1px solid #000;
    padding: 10px;
}
</style>
<table>
    <tr>
        <td>a</td>
        <td>b</td>
        <td>c</td>
        <td>d</td>
        <td style="display:none;">1</td>
    </tr>
</table>

jQ：

$("tr").click(function(){
    var row = $(this);
    var visibleLength = row.find("td:visible").length;
    var hiddenLength = row.find("td:not(:visible)").length;
    var drillRow = $("<tr/>").addClass("drillDownRow");
    var drillColumn = $("<td/>").attr("colspan", visibleLength);
    var drillHidden = $("<td/>").attr("colspan", hiddenLength).css({display: "none"});

    drillColumn.html("test <b>2</b>... ok");

    drillRow.hide().append(drillColumn).append(drillHidden).insertAfter(row);
    drillRow.slideDown("slow",function() {$(this).css({display: "table-row"})});
});
4

2 に答える 2

3

animateの代わりにメソッドを使用してみてくださいslideDown。必要な効果をもう少し手動で定義する必要がありますが、それがdisplay:block問題になることはありません。

http://api.jquery.com/animate/から引用：

注：.slideDown（）や.fadeIn（）などの簡略化されたアニメーションメソッドとは異なり、.animate（）メソッドは非表示の要素をエフェクトの一部として表示しません。たとえば、$（'someElement'）。hide（）。animate（{height： '20px'}、500）を指定すると、アニメーションは実行されますが、要素は非表示のままになります。

于 2012-04-12T15:59:34.023 に答える
2 
 $el.slideDown(function() {$(this).css('display', '');});
于 2016-05-30T10:41:37.617 に答える