Question

我使用下面的代码向下滑动一行，但jQuery强制display: block行，当它应该是table-row时，会破坏样式。

我完成后手动将其设置为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"})});
});

Answer 1

尝试使用animate方法代替slideDown。你需要对你想要的效果进行更多的手动定义，但它不会引入给你带来麻烦的display:block。

引自http://api.jquery.com/animate/：

注意：与.slideDown（）等简写动画方法不同 .fadeIn（），。animate（）方法不会使隐藏元素可见作为效果的一部分。例如，给定 $（'someElement'）。hide（）。animate（{height：'20px'}，500），动画将运行，但元素将保持隐藏。

Answer 2

 $el.slideDown(function() {$(this).css('display', '');});

slideDown强制显示：block

2 个答案: