Html 滑出控制抽屉或容器

我正在尝试实现一个布局，如下图所示

我有一个包含多行和两列信息的表。我想要的是有一个按钮（用“>”角括号表示），当点击按钮时，它会导致按钮的“抽屉”从左列滑出。我想它只是覆盖行，而不是推任何内容时，它打开。如果它和那排一样高就最好了

我在JSFIDLE中进行了尝试，但未能实现我所追求的目标

HTML:

一些文本1
>
btn1
btn2
btn3
状态文本

CSS

表格{
边界塌陷：塌陷；
}
桌子
th，
运输署{
边框：1px纯黑；
填充：10px；
}
#纽扣拉威尔{
宽度：0；
溢出：隐藏；
位置：绝对位置；
}

JavaScript

$（文档）.ready（函数（）{
$（'#showPanel'）。单击（函数（）{
$（'#buttonDrawer'）。设置动画({
宽度：150
});
});
});

任何帮助都将不胜感激

谢谢

将您的

#按钮拖动程序
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;
}


工作示例


$（文档）.ready（函数（）{
$（'#showPanel'）。单击（函数（）{
$（'#buttonDrawer'）。设置动画({
宽度：150
});
});
});
表格{
边界塌陷：塌陷；
}
桌子
th，
运输署{
边框：1px纯黑；
填充：10px；
位置：相对位置；
}
#纽扣拉威尔{
宽度：0；
溢出：隐藏；
位置：绝对位置；
空白：nowrap；
排名：0；
底部：0；
背景：#ccc；
左：100%；
z指数：1；
}
#外{
}

一些文本1
>
btn1
btn2
btn3
状态文本
将您的
#按钮拖动程序更改为

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


工作示例


$（文档）.ready（函数（）{
$（'#showPanel'）。单击（函数（）{
$（'#buttonDrawer'）。设置动画({
宽度：150
});
});
});
表格{
边界塌陷：塌陷；
}
桌子
th，
运输署{
边框：1px纯黑；
填充：10px；
位置：相对位置；
}
#纽扣拉威尔{
宽度：0；
溢出：隐藏；
位置：绝对位置；
空白：nowrap；
排名：0；
底部：0；
背景：#ccc；
左：100%；
z指数：1；
}
#外{
}

一些文本1
>
btn1
btn2
btn3
状态文本
我对一些代码做了一些修改，如果您对什么功能有任何疑问，请告诉我

重要的是，切换到类，比拥有100个不同名称的id容易得多。使用
（this）
控制我们在哪个表行中工作

这是可以玩的游戏

A将幻灯片向外覆盖，而不是将内容滑到侧面


$（'.showPanel'）。单击（函数（）{
if（$（this）.closest（'tr'）.find（'.buttonDrawer'）.hasClass（'open'））{//if open关闭它
$（this）.closest（'tr'）.find（'.buttonDrawer'）.removeClass（'open'）；
$（this）.closest（'tr'）.find（'.showPanel'）.text（'>'）；
}否则{//如果关闭，请打开它
$（this）.closest（'tr'）.find（'.buttonDrawer'）.addClass（'open'）；
$（this）.closest（'tr'）.find（'.showPanel'）.text（'我稍微更改了一些代码，如果您对什么起作用有任何疑问，请告诉我

重要的是，切换到类，这比拥有100个不同名称的id要容易得多。使用
（this）
来控制我们在哪个表行中工作

这是可以玩的游戏

A将幻灯片向外覆盖，而不是将内容滑到侧面


$（'.showPanel'）。单击（函数（）{
if（$（this）.closest（'tr'）.find（'.buttonDrawer'）.hasClass（'open'））{//if open关闭它
$（this）.closest（'tr'）.find（'.buttonDrawer'）.removeClass（'open'）；
$（this）.closest（'tr'）.find（'.showPanel'）.text（'>'）；
}否则{//如果关闭，请打开它
$（this）.closest（'tr'）.find（'.buttonDrawer'）.addClass（'open'）；
$（this）.closest（'tr'）.find（'.showPanel'）.text（'类似于此？@banzomaikaka这很好，但我确实更喜欢宽度动画，因此有更多的“滑出”效果，而不仅仅是翻译。谢谢！类似这样的？@banzomaikaka很好，但我确实更喜欢宽度动画，因此有更多的“滑出”效果，而不仅仅是翻译。谢谢！这太棒了，但我不会检查它，因为解决方案会推动状态文本，而我更喜欢覆盖。非常感谢您所做的，并希望将其中的一些内容合并到您的答案中@Gaby@EugeneS这是第二把小提琴，它有一个滑梯封面效果。虽然我对代码做了一些修改，但这可能会对您有所帮助。这很好，但我不会仅仅因为解决方案会推送状态文本而检查它，而我更喜欢覆盖。非常感谢您所做的，并希望将其中的一些内容合并到您的答案中@Gaby@EugeneS这是第二副手le可以玩，它有一个幻灯片来覆盖影响。虽然我对代码做了很多修改，但它可能会对您有所帮助。