我正在尝试实现如下图所示的布局。
我有一个包含多行和 2 列信息的表格。我想要的是有一个按钮(由“>”尖括号表示)，单击该按钮会导致按钮的“抽屉”从左列滑出。我希望它只是覆盖该行，而不是在它打开时推送任何内容。如果它与行的高度相同，那将是最好的。
我在 JSFiddle 中试过了 here , 但无法实现我所追求的目标。
HTML:
<body>
<table>
<tbody>
<tr>
<td>Some text 1</td>
<td>
<div id="outer">
<div>
<button id="showPanel">></button>
</div>
<div id="buttonDrawer">
<button>btn1</button>
<button>btn2</button>
<button>btn3</button>
</div>
</div>
</td>
<td>status text</td>
</tr>
</tbody>
</table>
</body>
CSS
table {
border-collapse: collapse;
}
table,
th,
td {
border: 1px solid black;
padding: 10px;
}
#buttonDrawer {
width: 0;
overflow: hidden;
position: absolute;
}
JavaScript
$(document).ready(function() {
$('#showPanel').click(function() {
$('#buttonDrawer').animate({
width: 150
});
});
});
如有任何帮助，我们将不胜感激。
谢谢!
最佳答案
将您的 #buttonDrawer CSS 更改为
#buttonDrawer {
width: 0;
overflow: hidden;
position: absolute;
white-space:nowrap;
top:0;
left:100%;
bottom:0;
background:#ccc;
z-index:1;
}
和td
table,
th,
td {
border: 1px solid black;
padding: 10px;
position:relative;
}
工作示例
$(document).ready(function() {
$('#showPanel').click(function() {
$('#buttonDrawer').animate({
width: 150
});
});
});table {
border-collapse: collapse;
}
table,
th,
td {
border: 1px solid black;
padding: 10px;
position:relative;
}
#buttonDrawer {
width: 0;
overflow: hidden;
position: absolute;
white-space:nowrap;
top:0;
bottom:0;
background:#ccc;
left:100%;
z-index:1;
}
#outer {
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td>Some text 1</td>
<td>
<div id="outer">
<div>
<button id="showPanel">></button>
</div>
<div id="buttonDrawer">
<button>btn1</button>
<button>btn2</button>
<button>btn3</button>
</div>
</div>
</td>
<td>status text</td>
</tr>
</tbody>
</table>关于html - 滑出控制抽屉或容器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44479114/