Jquery 在表格中显示和隐藏答案

【问题标题】：Jquery Show and hide within a tableJquery 在表格中显示和隐藏
【发布时间】：2011-08-21 15:11:53
【问题描述】：

我有一个包含内容的表格和一个图像，单击该图像会显示 div 中包含的隐藏内容。这个 div 有另一个表格来格式化内容。现在，当我在 IE 和 chrome 中对此进行测试时，隐藏的内容会根据单击的按钮上下滑动。但是当我在 Firefox 中执行此操作时，内容只是出现并消失，没有平滑的滑动。谁能告诉我为什么。如果我将显示按钮移出顶部表格并将其插入两个表格之间，则上下滑动可以顺利进行。唯一的问题是我需要显示按钮在内容中

我的脚本是这样的

<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>

【问题讨论】：

顺便说一句，$(function() {});是 $(document).ready(function() {}) 的简写； - 无需在此处包装内部调用。

标签： jquery show show-hide slidedown slideup

【解决方案1】：

检查这个 JSFiddle：http://jsfiddle.net/s3Fpt/3/ (1)

这适用于 Firefox

您的 div 和 table 中的 align="left" border="0" 似乎对动画产生了负面影响。这不是问题，因为您应该只用 HTML 定义文档，而不是设置样式。此外， align 是一个不推荐使用的属性，无论如何都应该避免使用。

对齐和边框的样式可以用css来完成：

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

(1) edit：删除了额外的函数包装，正如 ScottE 所注意到的那样

【讨论】：