Javascript 单击行时表格的高度会发生变化

我有一个表，表中有许多行，我想单击这些行，然后向下滑动隐藏的行。问题是我在每行的下面都有一些空白。是否有方法删除此空白，并仅在单击每行时添加此空白？ 以下是我的片段：

var=true；
$（.one”）。在（'click'，function（）上{
如果（单击）
{
单击=假；
$（.two”）.css（{“top”：0}）；
}
其他的
{
单击=真；
$（.two”）.css（{“top”：“-25px”}）；
}
});
.one{
位置：相对位置；
排名：0；
背景颜色：浅蓝色；
z指数：1；
光标：指针；
}
.二{
位置：相对位置；
顶部：-25px；
背景颜色：黄色；
z指数：-1；
-webkit过渡：前1名；
-moz转换：前1；
-o-过渡：前1s；
过渡：前1名；
}

你好，世界
这是隐藏文本
你好，世界
这是隐藏文本
只需将所有javascript替换为以下内容：

$(".one").on('click', function(){
    $(this).next().toggle();
});

对于javascript部分：

.next（）
查找直接同级

.toggle（）
将其从隐藏/显示更改为隐藏/显示（天生知道）。您还可以通过在其中添加数字来添加轻微的淡入效果。
您可以始终使用flex box布局。
下面是一种针对您的问题的黑客解决方案，在表上设置dispaly:flex，在tr上设置display:block。现在转换高度是np

编辑：更新代码以分别适用于每一行
$（.one”）。在（'click'，function（）上{
if（$（this）.next（）.height（）==0）{
单击=假；
$（this.next（）.css）({
“顶部”：0，
“高度”：“25px”
});
}否则{
单击=真；
$（this.next（）.css）({
“顶部”：“-25px”，
“高度”：“0”
});
}
});
表格{
显示器：flex；
}
tr{
显示：块
}
.一{
位置：相对位置；
排名：0；
背景颜色：浅蓝色；
}
.二{
身高：0；
溢出：隐藏；
位置：相对位置；
顶部：-25px；
背景颜色：黄色；
z指数：-1；
-webkit转换：所有1；
-moz转换：所有1；
-o-过渡：allt1s；
过渡：所有1；
}

你好，世界
这是隐藏文本
你好，世界
这是隐藏文本
非常感谢您。当单击每一行时，是否有一种方法可以分别显示每个隐藏行？