当父级和子级都切换时，jQuery切换不会更改可见元素的子元素。

在jQuery中 – 我有一个可见的父元素和子元素 – 两者都有相同的类。

如果我使用类作为选择器toggle() ，则子项的样式不会更新为display: none; – 即使它有选择器。

但是，如果我有一个隐藏元素和一个隐藏的子元素 – 两个都具有相同的类 – 则都会更新element.styles以display: block; 在toggle() 。 当第二次切换时，现在可见元素的行为方式与原始可见元素相同，并且子元素element.style不会更新以显示它是隐藏的。

这导致从第二个切换开始看似消失的子元素。

是否可以使用toggle()使可见元素的可见子元素都被切换为更新子元素的element.style以显示：none？

请看这个工作示例：

http://jsfiddle.net/bMMhy/1/

谢谢，

Answer 1

经过一番挖掘后，我想出了为什么子元素没有被切换：

jQuery切换的源函数如下：

 function (fn, fn2, callback) { var bool = typeof fn === "boolean"; if (jQuery.isFunction(fn) && jQuery.isFunction(fn2)) { this._toggle.apply(this, arguments); } else if (fn == null || bool) { this.each(function () { var state = bool ? fn : jQuery(this).is(":hidden"); jQuery(this)[state ? "show" : "hide"](); }); } else { this.animate(genFx("toggle", 3), fn, fn2, callback); } return this; } 

如果没有参数传递给函数，那么以下是执行的内容：

 var state = bool ? fn : jQuery(this).is(":hidden"); jQuery(this)[state ? "show" : "hide"](); 

首先隐藏包含元素，然后检查子元素…这意味着子元素将在jQuery(this).is(":hidden")上返回true。 反过来，jQuery实际上将’show’应用于元素。

解决方法：

通过传递参数1，jQuery将调用持续时间为1毫秒的animate函数来执行切换。

 $(document).ready(function(){ $('#myb').click(function(){ $('.child').toggle(1); }); });​ 

见到这里： http ： //jsfiddle.net/bMMhy/3/

Answer 2

发生的事情是调用.toggle没有达到嵌套元素。 我不确定这是因为底部的一个inheritance了显示器导致它切换一次，然后因为它有类与事件绑定它再次切换 – 或者如果有另一个原因，也许隐藏的嵌套div不会去以及jquery事件。 无论哪种方式，这里都是解决方案：只隐藏父级。

HTML：

 
 Child 1.1 
 Child 1.2 
 
 
 Child 2.1 
 Child 2.2 
 
 Toggle Divs with Class 'Child' 

JS：

 $(document).ready(function(){ $('#myb').click(function(){ $('.child').toggle(); }); });​ 

CSS：

 .child, .nestedchild{ position:relative; width:90%; height:90%; border: 1px solid blue; margin:20px; } .hidden{ display:none; }