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元素漂移頁面

回答

相關問題