10

由于代码很多,这里就不贴了。相反,您可以在这里找到所有内容。这样你就可以玩弄它并运行它:

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 像预期的那样向下滑动,但在最后突然“跳跃”。

为什么它会这样做,我怎样才能让它消失?

4

3 回答 3

23

其实你不需要这些。只需给隐藏元素一个宽度:

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

它会起作用的!

PS:我整个周末都花在了这个上......

于 2010-08-24T04:58:32.153 回答
12

演示

代码链接

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

类似问题已回答

于 2010-07-27T05:59:57.843 回答
0

给隐藏的 div 一个设定的高度。jsfiddle


编辑。在这里找到了一些答案。您可以存储每个元素的高度,然后重新应用它。不适合您的情况,但可能是一个起点

于 2010-07-27T05:48:45.417 回答