Jquery在表中显示和隐藏
我有一个包含内容的表和一个图像,单击该表可以显示div中包含的隐藏内容。此div中有另一个表来格式化内容。现在,当我在IE和chrome中进行测试时,隐藏内容会根据单击的按钮上下滑动。但当我在firefox中这样做时,内容只是出现和消失,没有平滑滑动。谁能告诉我为什么。如果我将“显示”按钮从顶部表格中移出,并将其插入两个表格之间,则上下滑动会顺利进行。唯一的问题是我需要显示按钮在内容中 我的脚本是这样的Jquery在表中显示和隐藏,jquery,show,show-hide,slidedown,slideup,Jquery,Show,Show Hide,Slidedown,Slideup,我有一个包含内容的表和一个图像,单击该表可以显示div中包含的隐藏内容。此div中有另一个表来格式化内容。现在,当我在IE和chrome中进行测试时,隐藏内容会根据单击的按钮上下滑动。但当我在firefox中这样做时,内容只是出现和消失,没有平滑滑动。谁能告诉我为什么。如果我将“显示”按钮从顶部表格中移出,并将其插入两个表格之间,则上下滑动会顺利进行。唯一的问题是我需要显示按钮在内容中 我的脚本是这样的 <script type="text/javascript"> //<![
<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>
满足于此
这里呢
隐藏的内容
隐藏的内容
隐藏的内容
隐藏的内容
隐藏的内容
隐藏的内容
隐藏的内容
检查此JSFIDLE:(1)
这在Firefox中有效
div和表中的align=“left”border=“0”
似乎都会对动画产生负面影响。这不是问题,因为您应该只使用HTML定义文档,而不使用样式。此外,align是一个不推荐使用的属性,无论如何都应该避免使用
可以使用css设置路线和边框的样式:
td, div.slidingDiv
{
border: 0;
text-align: left; // Though not really necessary because this is default
}
(1) 编辑:删除了额外的函数包装,正如ScottE所注意到的,$(function(){});是$(document.ready(function(){});-不需要把内线电话包在这里。