jQuery переключил элементы tr дрейфуют вниз по странице - PullRequest
Новая
       35

jQuery переключил элементы tr дрейфуют вниз по странице

0 голосов
/ 01 декабря 2010

Суть моей проблемы в том, что у меня есть таблица, в которой каждая четная строка скрыта, и видимость переключается с помощью якоря в строке выше.Это работает правильно, но в некоторых браузерах (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Хром.(Еще не тестировал в IE).Это вызывает у меня подозрение, что это проблема, связанная с webkit.

Кто-нибудь еще нашел проблему?Есть ли обходной путь?

1 Ответ

0 голосов
/ 01 декабря 2010

Я могу воспроизвести вашу проблему в Chrome с помощью jQuery 1.4.2, но не с 1.4.4. На самом деле, в 1.4.4 строка таблицы вообще не анимируется - вместо этого она просто включается и выключается (после задержки).

Поведение slideToggle в элементах таблицы выглядит несколько неопределенным. Как обходной путь, поместите <div> вокруг вашего <td> содержимого и вместо этого вызовите slideToggle: 

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