有没有办法强制$ .toggle（）来持续切换已经隐藏的孩子？

Question

我有一个应用程序，可以在不同级别过滤数据集，并且 - 出于性能原因 - 能够独立切换嵌套div的相应显示将是很好的。出现的问题是切换会将显示属性更改回隐藏子项上的原始状态，但如果其中一个祖先已隐藏，则不会将其更改为无。

要复制：this JSFiddle，

1. 单击“切换3”按钮，然后单击“切换2”按钮。
2. 点击“切换3”按钮，然后点击“切换2”，您会发现3个已恢复（正如预期的那样）。
3. 现在点击“切换2”按钮，然后点击“切换3”。
4. 再次单击“切换2”时，仍然可以看到3（???）。

Answer 1

切换可以采用布尔值

$(selector).toggle(false);

---

http://api.jquery.com/toggle/

  

.toggle（showOrHide）

     

showOrHideA布尔值，指示是否显示或隐藏元素。

---

<强>更新

您可以通过创建一个简单的hidden css类来调用toggleClass()而不是使用toggle()来实现所需的功能。如果相关元素不可见，toggle()似乎完全跳过了自己的功能。

http://jsfiddle.net/hunter/GufAW/3/

$("#toggle-1").click(function() {
    $("#1").toggleClass("hidden");
});
$("#toggle-2").click(function() {
    $("#2").toggleClass("hidden");
});
$("#toggle-3").click(function() {
    $("#3").toggleClass("hidden");
});

Answer 2

尝试直接切换css display属性：

http://jsfiddle.net/GufAW/5/

$("#toggle-1").click(function() {
    $("#1").css("display", ($("#1").css("display")==="none") ? "block" : "none");
});
$("#toggle-2").click(function() {
    $("#2").css("display", ($("#2").css("display")==="none") ? "block" : "none");
});
$("#toggle-3").click(function() {
    $("#3").css("display", ($("#3").css("display")==="none") ? "block" : "none");
});