展开和折叠HTML表格

fykwrbwg  于 2022-11-27  发布在  其他
关注(0)|答案(2)|浏览(213)

免责声明:我是一个HTML,JavaScript和CSS新手。
我尝试做的是有一个可展开/可折叠的HTML表,如下所示。点击“值1”应该显示“类别1”(还有其他类别,但为了最小化代码,我只显示了1个类别)。然后点击“类别1”将显示更多子值。问题是当点击“值1”时,它只隐藏了“类别1”,同时仍显示子值。如果我能用最少的代码更改来轻松地更改它,以便单击值1隐藏类别1和子值,请注意,还有更多的类别和子值,因此也需要隐藏它们。
理想情况下,单击“值1”应隐藏所有类别和子值,而再次单击它应将类别和子值恢复到它们原来的任何状态,隐藏或可见。
希望这是有意义的。提前感谢
已折叠:

展开(错误):

完全展开:

第一个

xqk2d5yq

xqk2d5yq1#

你好,在我的一点知识,你应该切换隐藏类在expandFRED类点击事件为切换整个表下面是总的代码
请您应用您的css
第一个

mwngjboj

mwngjboj2#

编辑日期:

替换为以下代码:

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

CSS变更

.hide {
  display: none;
}

并删除以下内容:

.expandSUB1 {
   display: none;
}

第一个

相关问题