Question

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

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

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

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

是否可以使用toggle()让可见元素的可见子元素被切换为更新子元素的元素.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实际上将应用＆＃39; show＆＃39;到元素。

解决方法：

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

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

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

2 个答案: