1

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

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

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

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

是否可以使用toggle()同时关闭可见元素的可见子元素将子元素的 element.style 更新为 display:none？

请参阅此工作示例：

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

谢谢，

4

2 回答 2

2

经过一番挖掘，我弄清楚了为什么子元素没有被切换：

jQuery的toggle的源函数如下：

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"]();

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

解决方法：

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

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

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

于 2012-04-19T10:50:21.647 回答
1

发生的事情是调用.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;    
}

​ ​</p>

于 2012-04-18T18:51:14.393 回答