Pourquoi cette ligne de "sauter" quand je l'appelle slideDown?

Car il y a beaucoup de code, je ne vais pas le poster ici. Plutôt, vous pouvez trouver tout cela ici. De cette façon, vous pouvez jouer avec elle et de l'exécuter:

JS:

function P_Expand(item_id) {
  $('#p_' + item_id).slideToggle();
}

CSS:

.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;
}

HTML:

<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>

Le problème se pose lors de la " Goutte de m'! lien est cliqué. La DIV glisse vers le bas comme prévu, mais le coup du "saut" à la fin.

Pourquoi faut-il faire cela, et comment puis-je la faire disparaître?

InformationsquelleAutor Nathan Osman | 2010-07-27
  1. 12

    démo

    codes lien

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

    similaire problème répondu

    • Oui! Il fonctionne! Donc, le problème est qu'il doit être explicitement hauteur de définir à l'avance?
    • yeap!.. c'est le problème... 😉
    • Souhaite que je pourrais vous donner des +2 🙂 Merci d'un million!
    InformationsquelleAutor Reigel
  2. 23

    Fait, vous n'avez pas besoin de tout cela.
    Il suffit de donner votre élément masqué largeur:

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

    Il fonctionne, tout simplement!

    PS: j'ai passé tout le week-end sur cette...

    • A fonctionné pour moi aussi =) Simple! Même width:100% œuvres
    • La solution la plus Simple! J'ai besoin de mettre overflow:hidden; aswell, tnx!
    InformationsquelleAutor Victor Teixeira
  3. 0

    Donner la div caché une hauteur donnée. jsfiddle

    Modifier. Trouvé quelques réponses ici. Vous pouvez stocker la hauteur de chaque élément, puis appliquez-la à nouveau. Pas idéal pour votre situation, mais peut-être un point de départ

    • Mais que faire si les changements de contenu et il n'est plus adapté sur la ligne? L'extrait de code dans mon exemple fait partie d'une grande page qui a beaucoup de ces lignes et qu'ils ne sont pas garantis pour être one-liners.
    • Whoa, ne pas utiliser de min-height. C'est juste funky.. Essayer d'autres options maintenant.
    InformationsquelleAutor hookedonwinter