Javascript 扩充及；折叠HTML表

免责声明：我是HTML、javascript和CSS新手

我想做的是创建一个可扩展/可折叠的HTML表，如下所示。单击“值1”应显示“类别1”（还有其他类别，但为了尽量减少代码，我只显示了1个类别）。然后单击“类别1”将显示更多的子值。问题是，当单击“值1”时，它仅隐藏“类别1”，同时仍显示子值。你知道我如何用最少的代码更改轻松地更改它，以便单击值1隐藏类别1和子值吗。请注意，还有更多类别和子值，因此也需要隐藏它们

理想情况下，单击“值1”应隐藏所有类别和子值，而再次单击则应将类别和子值恢复为隐藏或可见的任何状态

希望这是有道理的。提前谢谢

倒塌：

扩展（错误）：

完全扩展：

$（文档）.ready（函数（）{
$（'[data toggle=“toggle”]'）。更改（函数（）{
$（this.parents（）.next（'.hide'）.toggle（）；
});
});
$（文档）.ready（函数（）{
$（“.expandFRED”）。单击（函数（）{
$（“.expandSUB1”）.toggle（）；
});
$（“.expandVALS”）。单击（函数（）{
$（“.expandCAT1”）.toggle（）；
});
}) <
/脚本>

.label tr td label{
显示：块；
}
[数据切换='toggle']{
显示：无；
}
.sub1{
显示：无；
}
. {
显示：无；
}
.扩展CAT1{
显示：无；
}

值1（单击此处展开/折叠）
类别1（单击此处展开/折叠）
$461.11
$428.33
-7.11%
$-32.78
子值1
0.405582
0.405582
子值2
1.
1.
子值3
1.392379
1.407569

您好，据我所知，您应该在expandFRED中切换隐藏类 用于切换的类单击事件下表为全部代码

请你应用你的css

$（文档）.ready（函数（）{
$（'[data toggle=“toggle”]'）。更改（函数（）{
$（this.parents（）.next（'.hide'）.toggle（）；
});
});
$（文档）.ready（函数（）{
$（“.expandFRED”）。单击（函数（）{
$（“.expandSUB1”）.toggle（）；
});
$（“.expandVALS”）。单击（函数（）{
$（“.expandCAT1”）.toggle（）；
});
$（“.expandFRED”）。单击（函数（）{
$（“.hide”）.toggle（）；
});
})

.imagetable{
边框：1px纯黑；
}
.标签tr td标签{
显示：块；
边框：1px纯黑；
}
运输署{
边框：1px纯黑；
}
[数据切换='toggle']{
显示：块；
}
/*.sub1{
显示：块；
}
弗雷德先生{
显示：块；
}
.扩展CAT1{
显示：块；
}*/

值1（单击此处展开/折叠）
类别1（单击此处展开/折叠）
$461.11
$428.33
-7.11%
$-32.78
子值1
0.405582
0.405582
子值2
1.
1.
子值3
1.392379
1.407569

编辑：

替换为以下代码：

$(".expandFRED").click(function() {
  $('.hide').toggle();  
});
$(".expandVALS").click(function() {
  $(".expandCAT1").toggle();
});

CSS更改：

.hide {
  display: none;
}

并删除以下内容：

.expandSUB1 {
   display: none;
}

$（文档）.ready（函数（）{
$（“.expandFRED”）。单击（函数（）{
$（'.hide'）.toggle（）；
});
$（“.expandVALS”）。单击（函数（）{
$（“.expandCAT1”）.toggle（）；
});
})

.hide{
显示：无；
}
.扩展CAT1{
显示：无；
}

值1（单击此处展开/折叠）
类别1（单击此处展开/折叠）
$461.11
$428.33
-7.11%
$-32.78
子值1
0.405582
0.405582
子值2
1.
1.
子值3
1.392379
1.407569

尝试在网站w3schools.com上搜索-这里有很多有用的html信息。有几件事，我建议你美化你的代码，因为每个人都很难阅读。你会想开始使用制表符或空格来清理它，很多时候你只需使用正确的语法样式就可以发现问题。@reecec:检查下面给出的答案。@reecec:希望是你想要的谢谢你，阿桑，太棒了。谢谢你把它清理干净，让它工作起来。这是一个巨大的帮助。也感谢NikhilKinkar清理了我的代码，非常感谢。谢谢这是最好的回答谢谢你的回答。我认为你的回答很好，似乎工作得很好，但是我已经将另一个回答标记为正确答案，因为我只能给出一个正确答案。谢谢你在这件事上花时间