jQuery切换tr元素漂移页面

我的问题的要点是我有一个表格，每个偶数行都隐藏起来，并且可视性在上面的行上使用锚点切换。这种方式可以正常工作，但在某些浏览器（Safari和Chrome）中，刚刚出现的tr下面的tr比它应该有的更下移。jQuery切换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相关的问题。

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

来源

2010-12-01 Zak Henry

用你的代码，并不能重现该问题，在Chrome和Safari tesdted，您可以复制它在此琴：HTTP ：//jsfiddle.net/fzHug/1/？ – 2010-12-01 02:36:51

如果你的谷歌显示隐藏tr jquery，你会发现很多引用奇怪的事情发生时，试图在各种浏览器显示隐藏tr的。然而，我用你的代码，用jQuery 1.4.3和chrome 7.0.517.44进行测试，并没有遇到你的问题。我也在ie 8和ff3.6中测试过。所有浏览器都正常工作。我的建议是尝试不同的方法，而不是使用幻灯片切换，尝试淡入淡出，并定期显示/隐藏，或者如果你不使用最新的jQuery，升级。否则，我只是建议不要隐藏tr的...切换到李的和css =] – superfro 2010-12-01 02:39:59

我能用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>

来源

2010-12-01 02:49:23 Emmett

jQuery切换tr元素漂移页面

回答

相关问题