像下拉菜单一样在表格单元格内展开 div

Question

我有一个 div，其中包含表格单元格中的复选框列表。默认有 溢出属性设置为“隐藏”并设置高度，因此只有第一个元素可见。

在点击操作后，我希望它在表格上展开而不调整表格行的大小。 就像下拉菜单一样。

有可能吗？

代码：

function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.height == '100px') {
e.style.height = '22px';
e.style.overflow = 'hidden';
e.scrollTop = 0;
}
else {
e.style.height = '100px';
e.style.overflow = 'scroll';
}
};

td {
    border: 2px solid black;
}
ul {
    margin: 0px;
}
#id {
    height: 30px;
    overflow: hidden;
}

<p><a onclick="toggle_visibility('test');">Click here to toggle size of div</a></p>
<p>

<table>
<tbody class="data">
<tr>
    <td>ABC</td>
    <td>
        <select>
          <option>1</option>
          <option>2</option>
          <option>3</option>
          <option>4</option>
        </select>
    
    </td>
    <td><div id="test" style="height: 22px; overflow: hidden;">
        <ul>
            <li><input type="checkbox">1</input></li>
            <li><input type="checkbox">2</input></li>
            <li><input type="checkbox">3</input></li>
            <li><input type="checkbox">4</input></li>
        </ul>
    </div></td>
</tr>
<tr>
<td>123</td>
<td>456</td>
<td>789</td>
</tr>
<tr>
<td>000</td>
<td>000</td>
<td>000</td>
</tr>
</tbody>
</table>

http://jsfiddle.net/6dmyfskj/

Answer 1

您必须将 DIV 位置属性设置为 absolute