有没有办法强制 $.toggle() 始终切换已经隐藏的孩子？答案

【问题标题】：Is there a way to force $.toggle() to consistently toggle already hidden children?有没有办法强制 $.toggle() 始终切换已经隐藏的孩子？
【发布时间】：2011-09-21 19:55:54
【问题描述】：

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

复制：在this JSFiddle，

单击“切换 3”按钮，然后单击“切换 2”按钮。
单击“toggle 3”按钮，然后单击“toggle 2”，您会发现 3 已恢复（如预期的那样）。
现在点击“toggle 2”按钮，然后点击“toggle 3”。
再次单击“切换 2”时，3 仍然可见 (???)。

【问题讨论】：

标签： show-hide jquery

【解决方案1】：

toggle 可以采用布尔值

$(selector).toggle(false);

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

.toggle(showOrHide)

showOrHide 一个布尔值，指示是显示还是隐藏元素。

更新

您可以通过创建一个简单的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");
});

【讨论】：

这总是会隐藏它们——不会让切换的行为一致，对吧？ "第二个版本的方法接受一个布尔参数。如果这个参数为真，则显示匹配的元素；如果为假，则隐藏元素。"
toggle 似乎可以切换元素及其子元素。
检查...切换选择器似乎只适用于可见/隐藏元素。隐藏时似乎跳过隐藏的子元素，显示时跳过显示的子元素。
这是我的测试：jsfiddle.net/hunter/GufAW/2 同样的事情，还有一些关于状态的更多信息
更新是功能性的，尽管最好传递一个参数来切换以使其保持一致。谢谢！

【解决方案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");
});

【讨论】：

这和hunter的方案基本一样，只是多JS少CSS。