Question

我有一个表，其中每一行显示嵌套区域的数据。当我说嵌套时我并不是指在HTML中，而是在区域如何相互关联。多个国家/地区包含多个区域，而这些区域又包含多个子区域（LA - Local Authority）。由于LA行数太多，因此默认情况下它们是隐藏的。

我希望这些行的行为类似于Windows文件夹视图，点击某个区域将显示/隐藏它的LA行。单击国家/地区名称将显示/隐藏其所有区域及其LA。无论您之前在其他国家/地区展示/隐藏的内容都不会受到影响。

我通过.nextUntil方法在Region级别工作。我无法解决的问题是，国家层面上的相同方法不起作用，因为它按预期隐藏了Region，但它显示了隐藏的LA，因为它只是使用了toogle。

有关如何点击国家/地区名称的任何想法都会隐藏区域及其LA，无论LA行是显示还是隐藏？再次点击它会很好地显示这些LA的先前状态，但不是必需的。全部关闭都很好。

在这里演示：http://fluent-interaction.co.uk/temp/table/tabletest.html

我的jQuery：

$(document).ready(function() {
$(".rowLA").hide();
$(".rowCountry th p").addClass("toggleClose");
$(".rowCountry th p").click(function() {
    $(this).closest(".rowCountry").nextUntil(".rowCountry").toggle();
    $(this).toggleClass("toggleClose");
});
$(".rowRegion th p").click(function() {
    $(this).closest(".rowRegion").nextUntil(".rowRegion, .rowCountry").toggle();
    $(this).toggleClass("toggleClose");
});

}）;

Answer 1

尝试添加

$(this).closest(".rowCountry").nextUntil(".rowCountry",".rowLA").hide();

这一行之后：

$(this).closest(".rowCountry").nextUntil(".rowCountry").toggle();

将隐藏该国家/地区内的所有LA。

我想知道为什么你在所有陈述中使用了nearest（）......！

使用jquery切换表行显示

1 个答案: