Почему эта строка «прыгает», когда я вызываю slideDown? - PullRequest
Новая
       1

Почему эта строка «прыгает», когда я вызываю slideDown?

10 голосов
/ 27 июля 2010

Поскольку кода много, я не буду его публиковать здесь. Скорее, вы можете найти все это здесь . Таким образом, вы можете поиграть с ним и запустить его: 

function P_Expand(item_id) {
  $('#p_' + item_id).slideToggle();
}
.data_table {
  width: 650px;
  margin-left: auto;
  margin-right: auto;
  border-collapse: collapse;
}
.data_table tbody th {
  border-bottom: 1px solid #555;
  text-align: left;
}
.data_table tbody tr td a {
  color: #8b9cb0;
  text-decoration: none;
}
.hidden_data {
  display: none;
  padding: 10px;
  font-style: italic;
  color: #777;
}
<table class='data_table'>
  <tbody>
    <tr>
      <td>
        <a href='javascript:void(0)' onclick='P_Expand(9)'>Drop me down!</a>
      </td>
      <td>...</td>
      <td>...</td>
    </tr>
    <tr>
      <td colspan='3' style='background-color: #eee'>
        <div id='p_9' class='hidden_data'>
          <p style="margin: 0px;">Donec dolor urna, vehicula in elementum eget, auctor dignissim nibh. Morbi et augue et nisi.</p>
        </div>
      </td>
    </tr>
    <tr>
      <td>Line number 2...</td>
      <td>...</td>
      <td>...</td>
    </tr>
  </tbody>
</table>

Проблема возникает, когда «Отпусти меня!» ссылка нажата. DIV скользит вниз, как и ожидалось, но внезапно «прыгает» прямо в конце.

Почему он это делает, и как я могу заставить его уйти?

Ответы [ 3 ]

23 голосов
/ 24 августа 2010

На самом деле вам ничего не нужно. Просто укажите ширину скрытого элемента: 

.hidden_data {
    display: none;
    padding: 10px;
    font-style: italic;
    color: #777;
    width: 300px;
}

Это будет просто работать!

PS: я провел все выходные на этом ...

12 голосов
/ 27 июля 2010

демо

ссылка на код 

.hidden_data {
    overflow: hidden;
    display:none; /* <--- remove this */
    padding: 10px;
    font-style: italic;
    color: #777;
}​

похоже ответ на проблему

0 голосов
/ 27 июля 2010

Дайте скрытому div установленную высоту. jsfiddle

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

...