Javascript HTML+；jquery在单击并悬停操作时展开表

我在网上找到了一些代码，但很难让它正常工作。我想通过单击收拢的标题展开表。通过删除

还有

标签，但我需要它们。以下是表格代码：

$（'table tr:not（.header）'）.hide（）；
$（'.header'）。单击（函数（）{
$（this）.toggleClass（'expand'）.nextUntil（'tr.header'）.slideToggle（100）；
});
表格，
tr，
运输署，
th{
边界塌陷：塌陷；
}
标题{
光标：指针；
}
.标题.签名：之后{
内容：“\2B9D”；
显示：内联块；
转换：转换0.3s；
变换：旋转（0度）；
}
.header.expand.sign:之后{
/*内容：“\2B9F”*/
转换：转换0.3s；
变换：旋转（180度）；
}

试验台
数据1
数据1
数据1
数据1
数据2
数据2
数据3
数据4
数据4
数据4
数据4
数据4
数据4
数据4
数据4
数据4
数据4
数据4
数据4
这就是你想要的吗


$（'table tr:not（.header）'）.hide（）；
/*$（'.header'）。单击（函数（）{
$（this.toggleClass（'expand'）；
$（this.parent（）.parent（）.find（'tbody tr'）.toggle（）；
});*/
$（'.header'）.mouseenter（函数（）{
$（this.toggleClass（'expand'）；
$（this.parent（）.parent（）.find（'tbody tr'）.slideToggle（100）；
});
$（'table'）.mouseleave（函数（）{
$（this）.find（'.header'）.toggleClass（'expand'）；
$（this.find（'tbody tr'）.slideToggle（100）；
});
表格，
tr，
运输署，
th{
边界塌陷：塌陷；
}
标题{
光标：指针；
}
.标题.签名：之后{
内容：“\2B9D”；
显示：内联块；
转换：转换0.3s；
变换：旋转（0度）；
}
.header.expand.sign:之后{
/*内容：“\2B9F”*/
转换：转换0.3s；
变换：旋转（180度）；
}

试验台
数据1
数据1
数据1
数据1
数据2
数据2
数据3
数据4
数据4
数据4
数据4
数据4
数据4
数据4
数据4
数据4
数据4
数据4
数据4
除了
测试表之外，我看不到任何一行。也许可以先把它修好？我不确定你的意思，这就是表的样子：据我所知，它确实有行。当您单击表格标题的红色区域时，它应该折叠并展开整个表格，如果删除了thead和tbody标记，它就会这样做。单击发布的代码上的
run
，您将什么也看不到。所以请解决这个问题，否则我们帮不了你。这很奇怪，因为我甚至不能用这个codesnipet工具运行w3schools示例中的表代码，但我的代码确实在w3schools网站code tester上运行：（下次试试JSFIDLE。现在它几乎可以扩展表了，这很好：）但它扩展了它周围的所有表。在整个页面中，我得到了8个表格，点击后它们都展开了。为什么谢谢你B。德赛：）它就像一个符咒。对不起，这让人很痛苦，你知道当你的手在桌子上的时候，如何保持悬停吗。对于您的代码，这现在运行得非常好，但是当我离开标题区域时，整个表都崩溃了<代码>$（'.header'）.hover（函数（）{$（this）.toggleClass（'expand'）；$（this.parent（）.parent（）.find（'tbody tr'）.slideToggle（100）；}）
@user1031204查看编辑的答案这是您想要的吗？