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显示和隐藏在表格内

回答

相关问题