Jquery Показать и спрятать в таблице - PullRequest
Новая
       22

Jquery Показать и спрятать в таблице

0 голосов
/ 21 августа 2011

У меня есть таблица с содержимым и изображение, при нажатии на которое отображается скрытое содержимое, содержащееся в элементе div.Этот div имеет еще одну таблицу для форматирования содержимого.Теперь, когда я проверяю это в IE и chrome, скрытый контент перемещается вверх и вниз в зависимости от нажатой кнопки.Но когда я делаю это в Firefox, контент просто появляется и исчезает без плавного скольжения.Может кто-нибудь сказать мне, почему.Если я перемещаю кнопку показа из верхнего стола и вставляю ее между двумя столами, скольжение вверх и вниз работает плавно.Единственная проблема с этим заключается в том, что мне нужно, чтобы кнопка показа находилась внутри содержимого

, мой сценарий выглядит так 

<script type="text/javascript">
//<![CDATA[
  $(function() {
    $(document).ready(function() {

      $(".slidingDiv").hide()
      $('.show').click(function() {
        $(".slidingDiv").slideDown(1000);
        return false;
      });

      $('.hide').click(function() {
        $(".slidingDiv").slideUp(1000);
        return false;
      });
    });
  });
//]]>
</script>

, который появляется в заголовке страницы

тогда мой код для тела страницы выглядит как 

<table style="width: 100%;" align="left" border="0">
  <tbody>
    <tr>
      <td>content here</td>
      <td>and here</td>
      <td><a class="show"><img src="images/more.jpg" onmouseout="this.src='images/more.jpg';" onmouseover="this.src='images/more_over.jpg';" /></a></td>
    </tr>
  </tbody>
</table>

<div class="slidingDiv">
  <table style="width: 100%;" align="left" border="0">
    <tbody>
      <tr>
        <td>content hidden</td>
        <td>content hidden</td>
        <td>content hidden</td>
      </tr>
      <tr>
        <td>content hidden</td>
        <td>content hidden</td>
      </tr>
      <tr>
        <td>content hidden</td>
        <td>content hidden</td>
      </tr>
    </tbody>
  </table>
  <a class="hide"><img src="images/close.jpg" onmouseout="this.src='images/close.jpg';" onmouseover="this.src='images/close_over.jpg';" /></a>
</div>

1 Ответ

0 голосов
/ 21 августа 2011

Проверьте это JSFiddle: http://jsfiddle.net/s3Fpt/3/ (1)

Это работает в Firefox

Кажется, что align="left" border="0" в вашем div и таблице отрицательно влияет на анимацию.Это не проблема, потому что вы должны определять свой документ только с помощью HTML, а не стилизовать его.Кроме того, align является устаревшим атрибутом, и его следует избегать в любом случае.

Стилизация выравнивания и границы может быть выполнена с помощью css: 

td, div.slidingDiv
{
  border: 0;
  text-align: left;  // Though not really necessary because this is default
}

(1) edit : удалено добавление дополнительной функции, как заметил ScottE

...