爲什麼jQuery slideToggle（）函數在我的表格中對我來說很奇怪？

我在做一個HTML原型，我想創建一個表格，當用戶點擊一個按鈕時將會顯示更多的表格行。我想使用slideToggle函數或其他順利的東西。爲什麼jQuery slideToggle（）函數在我的表格中對我來說很奇怪？

它的工作原理，顯示的內容，但有一些滯後或奇怪的事情發生。我已經在其他對象（不在表中）上應用了相同的功能，並且它已經很好地實現了。

這是我的腳本：

$(document).ready(function() { 
    $('#show-more-rows').click(function() { 
    $('#tr-button').slideToggle(); 
    $('.hidden-row').slideToggle(); 
    }); 
    $('#show-less-rows').click(function() { 
    $('#tr-button').slideToggle(); 
    $('.hidden-row').slideToggle(); 
    }); 
);

這裏是我的表jsFiddle。

任何幫助和提示將不勝感激！

/Bill

來源

2013-04-27 XT_Nova

jQuery的幻燈片動畫不支持表格行。只需將桌子分成兩張桌子（可見的桌子和將要展開的桌子），然後將第二張桌子分成div。現在你可以slideToggle()這個div。

這是你的解決辦法：http://jsfiddle.net/5SYBe/12/

來源

2013-04-27 16:15:42 Alex

謝謝你的回答。我很欣賞你用jsfiddle鏈接回答。然而，如果你看看你的jsfiddle，你可以在表格中看到表格數據不符合上表？如何解決這個問題？ =/ – 2013-04-27 16:51:23

由於現在有兩個表格，每個表格都需要定義列寬。因此，要麼爲這兩個表設置固定寬度，要麼在展開時用Javascript動態確定列寬（jQuery的width（）將很方便）。您可能還想將灰色容器內的按鈕移回。 – Alex 2013-04-27 16:56:29

您可以將代碼包含在答案本身中，而不是作爲jsFiddle的鏈接嗎？ – ChrisF 2013-04-27 22:12:42

的問題是，你使用它tr元素，它不能被重新調整大小，以低於它們的內容。（即表的方式工作）

所以動畫會嘗試將它們的高度從0增大到最大值，但它會失敗，因此您從一開始就看到它們的大小。

隱藏也是如此。雖然動畫持續（，它沒有任何東西可視）你看到它，並在元素得到隱藏的末尾，你會得到最終的狀態..

來源

2013-04-27 16:16:13

謝謝你和+1的解釋。 – 2013-04-27 17:55:31

爲什麼jQuery slideToggle（）函數在我的表格中對我來說很奇怪？

回答

相關問題