0

私の問題の要点は、すべての偶数行が非表示になっているテーブルがあり、上の行のアンカーを使用して可視性が切り替えられることです。これは正しく機能しますが、一部のブラウザ（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関連の問題であると私に疑わしいものです。

他の誰かが問題を見つけましたか？回避策はありますか？

4

1 に答える 1

0

ChromeでjQuery1.4.2を使用して問題を再現することはできますが、1.4.4では再現できません。実際、1.4.4では、テーブルの行はまったくアニメーション化されません。代わりに、オンとオフが切り替わります（遅延後）。

ontable要素の動作はslideToggleやや未定義のようです。回避策として、コンテンツの<div>周りに配置し、代わりにそれ<td>を呼び出します。slideToggle

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