Question

我的问题的关键在于我有一个表，每个偶数行都被隐藏，并且可以使用上面一行上的锚来切换可见性。这是正常的，但在某些浏览器（Safari和Chrome）中，刚刚出现的那个下面的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相关的问题。

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

Answer 1

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

slideToggle对表元素的行为似乎有些不确定。要解决此问题，请在<div>内容周围放置<td>，然后在其上调用slideToggle：

<tr>
    <td colspan="3">
        <div class="details">
            Sed scelerisque...
        </div>
    </td>
</tr>

jQuery切换tr元素向下漂移

1 个答案: