Question

我有一个包含表格单元格中复选框列表的div。它默认有 overflow属性设置为'hidden'和height设置，因此只有第一个元素可见。

执行onclick操作后，我希望它可以扩展到表而不调整表行的大小。就像下拉菜单一样。

无论如何可能？

代码：

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 位置属性设置为绝对

在表格单元格中展开div，如下拉菜单

1 个答案: