当父级和子级都切换时，jQuery切换不会更改可见元素的子element.style? [英] jQuery toggle doesn't change child element.style of visible elements when parent and child both toggled?

问题描述

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

In jQuery - I have a visible parent and child element - both have the same class.

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

If I toggle() using the class as the selector the child's style isn't updated to display: none; - even though it has the selector.

但是，如果我有一个隐藏的元素和一个隐藏的子元素-两者都具有相同的类-两个element.styles都会在toggle()时更新为display: block;.再次切换时，现在可见的元素将以与原始可见元素相同的方式起作用，并且子元素的element.style不会更新以表明它是隐藏的.

However if I have a hidden element and a hidden child element - both with the same class - both element.styles are updated to display: block; upon toggle(). When toggled a second time the now visible elements act in the same way as the original visible elements and the child's element.style isn't updated to show that it is hidden.

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

This results in what appears to be disappearing children elements starting with the second toggle.

是否可以使用toggle()让可见元素的可见子元素都被关闭，从而将子元素的element.style更新为display:none?

Is it possible using toggle() to have visible children of visible elements both being toggled off update the child's element.style to display:none?

请参见以下工作示例:

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

谢谢

推荐答案

经过一番挖掘之后，我弄清楚了为什么未切换子元素的原因:

After some digging around I figured out why the child element wasn't getting toggled:

jQuery切换的源函数如下:

The source function for jQuery's toggle is as follows:

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

如果没有参数传递给该函数，则执行以下操作:

if no parameters are getting passed to the function then the following is what gets executed:

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

首先隐藏了包含元素，然后检查了子元素……这意味着子元素将在jQuery(this).is(":hidden")上返回true.相应地，jQuery会在元素上实际应用显示".

The containing element is hidden first and then the child element is checked... which means that the child element will return true on jQuery(this).is(":hidden"). In turn jQuery will actually apply 'show' to the element.

解决方法:

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

By passing a parameter of 1 jQuery will instead call the animate function with a duration of 1 millisecond to perform the toggle.

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

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

这篇关于当父级和子级都切换时，jQuery切换不会更改可见元素的子element.style?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！