Jquery顯示和隱藏在表格內

我有一個內容和圖像的表格，當點擊時顯示包含在div內的隱藏內容。這個div有另一個表格來格式化內容。現在，當我在IE和Chrome中測試這個隱藏的內容時，根據點擊的按鈕上下滑動。但是當我在Firefox中這樣做時，內容剛剛出現並消失，沒有平滑的滑動。誰能告訴我爲什麼。如果我將顯示按鈕移出頂部桌面並將其插入兩張桌子之間，則上下滑動平穩運行。與此唯一的問題是我需要的顯示按鈕是內容中Jquery顯示和隱藏在表格內

我的劇本是這樣的

<script type="text/javascript"> 
//<![CDATA[ 
    $(function() { 
    $(document).ready(function() { 

     $(".slidingDiv").hide() 
     $('.show').click(function() { 
     $(".slidingDiv").slideDown(1000); 
     return false; 
     }); 

     $('.hide').click(function() { 
     $(".slidingDiv").slideUp(1000); 
     return false; 
     }); 
    }); 
    }); 
//]]> 
</script>

出現在頁面的頭部

然後我的代碼爲

頁面的身體看起來就像

<table style="width: 100%;" align="left" border="0"> 
    <tbody> 
    <tr> 
     <td>content here</td> 
     <td>and here</td> 
     <td><a class="show"><img src="images/more.jpg" onmouseout="this.src='images/more.jpg';" onmouseover="this.src='images/more_over.jpg';" /></a></td> 
    </tr> 
    </tbody> 
</table> 

<div class="slidingDiv"> 
    <table style="width: 100%;" align="left" border="0"> 
    <tbody> 
     <tr> 
     <td>content hidden</td> 
     <td>content hidden</td> 
     <td>content hidden</td> 
     </tr> 
     <tr> 
     <td>content hidden</td> 
     <td>content hidden</td> 
     </tr> 
     <tr> 
     <td>content hidden</td> 
     <td>content hidden</td> 
     </tr> 
    </tbody> 
    </table> 
    <a class="hide"><img src="images/close.jpg" onmouseout="this.src='images/close.jpg';" onmouseover="this.src='images/close_over.jpg';" /></a> 
</div>

來源

2011-08-21 Horse_WA

如發現順便說一句，$（函數（）{}）;是$（document）.ready（function（）{}）的簡寫形式; - 無需在此打包內線電話。 – ScottE

入住此的jsfiddle：http://jsfiddle.net/s3Fpt/3/（1）

This works in Firefox

看起來align="left" border="0"在你的div和table中都會對動畫產生負面影響。這不是問題，因爲您應該只用HTML定義文檔，而不是樣式。此外，align是已棄用的屬性，無論如何應該避免。

的樣式排列和邊框可以用CSS來實現：

td, div.slidingDiv 
{ 
    border: 0; 
    text-align: left; // Though not really necessary because this is default 
}

（1）編輯：去除多餘的功能包裝，由斯科特

來源

2011-08-21 16:33:04 Luwe

感謝球員......解決了我的問題 –

Jquery顯示和隱藏在表格內

回答

相關問題