0

我的问题的要点是我有一个表，其中每个偶数行都被隐藏，并且可见性是使用上面行上的锚点来切换的。这可以正常工作，但在某些浏览器（Safari 和 Chrome）中，刚刚出现的 tr 下方的 tr 比它应该有的更向下移动。

如果您继续切换隐藏的 tr，则下一个兄弟会在页面上向下漂移。

这是显示此问题的基本代码（需要 jquery）

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

   $('.details').hide();

   $('.show_hide').click(function(event){
    event.preventDefault();
    $(this).parents('tr').next().slideToggle('slow');
   });


  }); //end doc ready
 </script>

 <style>
  table {
   width: 500px;
  }

  .main td {
   width: 33%;
  }
 </style>

 <table>
  <tr class="main">
   <td>Title</td>
   <td>Some Detail</td>
   <td><a href="#" class="show_hide">Show/Hide</a></td>
  </tr>

  <tr class="details">
   <td>
    Sed scelerisque, tellus non auctor pretium, felis massa vehicula sem, quis vehicula nulla dolor eget justo. Pellentesque porttitor aliquet metus a accumsan. Aenean luctus, lacus in tristique imperdiet, nulla ipsum dignissim massa, quis laoreet eros justo eu nibh. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam sed purus nisi, at venenatis tellus. Praesent id magna ac dui congue convallis. Duis sit amet arcu eu ipsum tincidunt fermentum. Praesent mollis, eros sit amet auctor iaculis, mi elit aliquet elit, at rhoncus elit urna nec magna. Vestibulum iaculis fringilla diam, in rhoncus tortor blandit id. Nam id leo eros, et posuere massa. Morbi fermentum egestas nisl, et pharetra urna convallis viverra. Maecenas id massa nulla. Pellentesque eget urna vel diam interdum sollicitudin sit amet in massa.
   </td>
  </tr>

  <tr class="main">
   <td>Title 2</td>
   <td>Some Detail 2</td>
   <td><a href="#" class="show_hide">Show/Hide</a></td>
  </tr>

  <tr class="details">
   <td>
    Sed scelerisque, tellus non auctor pretium, felis massa vehicula sem, quis vehicula nulla dolor eget justo. Pellentesque porttitor aliquet metus a accumsan. Aenean luctus, lacus in tristique imperdiet, nulla ipsum dignissim massa, quis laoreet eros justo eu nibh. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam sed purus nisi, at venenatis tellus. Praesent id magna ac dui congue convallis. Duis sit amet arcu eu ipsum tincidunt fermentum. Praesent mollis, eros sit amet auctor iaculis, mi elit aliquet elit, at rhoncus elit urna nec magna. Vestibulum iaculis fringilla diam, in rhoncus tortor blandit id. Nam id leo eros, et posuere massa. Morbi fermentum egestas nisl, et pharetra urna convallis viverra. Maecenas id massa nulla. Pellentesque eget urna vel diam interdum sollicitudin sit amet in massa.
   </td>
  </tr>
 </table>

上面的代码似乎在 Opera 和 Firefox 中运行良好，但上面提到的问题发生在 Safari 和 Chrome 中。（尚未在 IE 中测试）。这让我怀疑这是一个与 webkit 相关的问题。

其他人发现问题了吗？有解决方法吗？

4

1 回答 1

0

我可以使用 jQuery 1.4.2 在 Chrome 中重现您的问题，但不能使用 1.4.4。事实上，在 1.4.4 中，表格行根本没有动画——相反，它只是打开和关闭（在延迟之后）。

on table 元素的行为slideToggle似乎有些不确定。作为一种解决方法，<div>在您的<td>内容周围放置一个并调用slideToggle它：

<tr>
    <td colspan="3">
        <div class="details">
            Sed scelerisque...
        </div>
    </td>
</tr>
于 2010-12-01T02:49:23.280 回答