1

jQueryでは、目に見える親要素と子要素があり、両方とも同じクラスを持っています。

クラスをtoggle()セレクターとして使用すると、セレクターがあっても、子のスタイルは更新されませんdisplay: none;。

ただし、非表示の要素と非表示の子要素 ​​(両方とも同じクラス) がある場合、両方の element.styles が on に更新されdisplay: block; ますtoggle()。もう一度切り替えると、現在表示されている要素は元の表示されている要素と同じように動作し、子の element.style は更新されず、非表示であることを示します。

これにより、2 番目のトグルから子要素が消えているように見えます。

toggle()表示されている要素の表示されている子を両方ともオフに切り替えて、子の element.style を display:none に更新することは 可能ですか?

次の実際の例を参照してください。

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

ありがとう、

4

2 に答える 2

2

少し掘り下げた後、子要素が切り替えられなかった理由を理解しました。

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

含まれている要素が最初に非表示になり、次に子要素がチェックされます...これは子要素がでtrueを返すことを意味しjQuery(this).is(":hidden")ます。次に、jQueryは実際に要素に「show」を適用します。

回避策：

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 に答える