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

Question

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

如果我使用该类作为选择器，孩子的风格不会更新为display: none; - 即使它有选择器。

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

这会导致看起来正在消失的孩子元素从第二个切换开始。

是否有可能使用toggle()让可见元素的可见子元素都被切换掉更新子元素的样式来显示：none？

请参见本工作示例：

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

感谢，

Answer 1

经过一番周围挖我想通了，为什么志LD元素没有得到切换：

为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的参数将改为调用animate函数与1毫秒的持续时间来执行切换。

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

这里看到：http://jsfiddle.net/bMMhy/3/

Answer 2

正在发生的事情是不被调用.toggle达到嵌套元素。我不确定这是否是因为最底层的继承了显示，导致它切换一次，然后因为它有类，事件绑定到它再次切换 - 或者如果还有其他原因，也许隐藏的嵌套div不去以及jQuery的事件。无论哪种方式，这里是解决方案：只隐藏父母。

HTML：

<div class="child"> 
Child 1.1 
<div class="nestedchild"> 
    Child 1.2 
</div> 
</div> 
<div class="child hidden"> 
Child 2.1 
<div class="nestedchild"> 
    Child 2.2 
</div> 
</div> 
<button id="myb">Toggle Divs with Class 'Child'</button> 

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;  
}