问题描述:

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

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.

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.

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?

Please see this working example:

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

Thanks,

网友答案:

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

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

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.

Workaround:

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

Seen here: http://jsfiddle.net/bMMhy/3/

网友答案:

What is happening is that the nested element is not being reached by the call to .toggle. I am uncertain if that is because the bottom one inherits the display causing it to toggle once, and then because it has the class the event is tied to it toggles again - or if there is another reason, perhaps that hidden nested divs do not go well with jquery events. Either way, here is the solution: only hide the parent.

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

相关阅读:
Top