Столбцы таблицы меняются во время jQuery.slide () - PullRequest
Новая
       36

Столбцы таблицы меняются во время jQuery.slide ()

0 голосов
/ 02 ноября 2011

У меня есть таблица, где половина данных скрыта и может быть расширена нажатием кнопки.Я следую схеме здесь .Вот мой HTML: 

<button class="toggleBtn">Hide/Show</button>
<table>
<tbody>
<tr>
    <td>Session Name : </td>
    <td>Generic name here</td>
</tr>
<tr>
    <td>Jump Date : </td>
    <td>12/25/2011</td>
</tr>
</tbody>
<tbody class="hiddenJumpSessionDetails" style="display:none;">

    <tr>
        <td>Created On : </td>
        <td>12/24/2011</td>
    </tr>
    <tr>
        <td>Inspector : </td>
        <td>Gadget</td>
    </tr>
    <tr>
        <td>Other Notes : </td>
        <td></td>
    </tr>
</tbody>

Вот мой JavaScript: 

<script>
$(document).ready(function()
{
    $(".toggleBtn").click(function()
    {
        $(".hiddenJumpSessionDetails").slideToggle();
    })
})

Пока скрытая часть прокручивается вверх / вниз,таблица действует так, как будто есть 3 столбца.Второй столбец в первом перемещается вправо, второй столбец во втором перемещается немного ближе влево.Весь второй столбец возвращается в нужное место после завершения слайда.

Что заставляет таблицу вести себя таким образом?

Примечание: этот эффект не возникает, если во втором столбце нет скрытых данных.Если бы «12/24/2011» и «Гаджет» были убраны, все было бы хорошо.

Ответы [ 2 ]

2 голосов
/ 02 ноября 2011

Похоже, у вас нет какой-либо ширины для таблицы или столбцов, поэтому она будет плавной.

Попробуйте установить ширину.

0 голосов
/ 02 ноября 2011

Я смог заставить это работать правильно, установив display:block в ваших tbody элементах и ​​скрыв элемент в скрипте следующим образом: 

<tbody style="display:block;" >
.
.
.
<tbody class="hiddenJumpSessionDetails" style="display:block;">

$(document).ready(function()
{
    $(".hiddenJumpSessionDetails").hide();
    $(".toggleBtn").click(function () {
      $(".hiddenJumpSessionDetails").slideToggle("slow");
    });
});

Вот пример: http://jsfiddle.net/aa7Kv/

...