slideDown的力量顯示：塊

我使用下面的代碼向下滑動一行，但jQuery強制執行display: block，當它應該是table-row，破壞樣式。slideDown的力量顯示：塊

我手動將它設置爲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"})}); 
});

來源

2012-04-12 bevacqua

有什麼辦法你不能使用這個表嗎？ – 2012-04-12 15:18:13

可能的重複：http://stackoverflow.com/q/467336/681807 – 2012-04-12 15:19:41

http://stackoverflow.com/questions/467336/jquery-how-to-use-slidedown-or-show-function-on-a-錶行 – 2012-04-12 15:21:01

嘗試使用animate方法而不是slideDown。你需要對你想要的效果做更多的手動定義，但是它不會引入給你帶來麻煩的display:block。

從引用：

注意：與速記動畫的方法，如.slideDown（）和 .fadeIn（）時，.animate（）方法不會使隱藏要素可見爲一體的部影響。例如，給定 $（'someElement'）。hide（）。animate（{height：'20px'}，500），動畫將運行，但該元素將保持隱藏狀態。

來源

2012-04-12 15:59:34 redlena

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

來源

2016-05-30 10:41:37 elixon

slideDown的力量顯示：塊

回答

相關問題