1

私はサイトを書いていて、jQuery を使用しています。DOM に 2 つの異なる変更を加えたいという問題があります。基本的に、私は$.toggle()いくつかの div を呼び出しています。そのうちの 1 つは非表示で、もう 1 つは表示されています。

<div>
    <button onclick='javascript:$(".panel").toggle()'>Toggle!</button>
    <div class="panel">Content1</div>
    <div class="panel hide">Content2</div>
</div>

私が抱えている問題は、を呼び出すたびにブラウザーがページを再レンダリングしていることtoggle()です。このスイッチは肉眼では見えませんが、奇妙な動作をします。

結局、最初の.paneldiv が見つかり、それが非表示に切り替えられます。次に、2 番目の.paneldiv が切り替えられて表示されます。これらの呼び出しの間に、ブラウザーは DOM の変更を検出し、両方の div を非表示にしてページを再レンダリングします。

これらの div がページの下部にある場合、ページが一瞬短くなるため、2 番目の div が表示される前にページのスクロール位置がジャンプします。

可視性を逆に反転しても同じ効果はありません。これは、ブラウザーが 2 番目の div を非表示にする前に、両方の div が表示された状態でページを短時間レンダリングするためです。その場合、スクロールの問題はありません。

これら 2 つのアクションになんらかのホールドまたはロックを設定して、ホールド/ロックが解除されるまでページをリフロー、スクロール、またはレンダリングしないようにブラウザに指示することはできますか? その場合、ブラウザーは単一の でページをレンダリングし.panel、javascript が実行され、ブラウザーは変更された DOM を再レンダリングするように指示されます。

編集

http://jsfiddle.net/3Kvqh/1/に私が言いたいことの JSFiddle を追加しました。ページの一番下をブラウズして「トグル」を押すだけで、スクロールが変になるのがわかります。

さらにテストすると、これは Chrome でのみ発生することが明らかになりました。プロットが厚くなります。

4

2 に答える 2

1

After better looking at my other answer, I think it will work for the first time but fail when you execute it a second time. So I've take a different approach here, this code will always work fine:

<button onclick='javascript:hd=$(".panel:hidden");vi=$(".panel:visible");hd.toggle();vi.toggle();'>Toggle!</button>

I'm taking advantage of jquery visibility filters to always firstly toggle the hidden divs later the visible ones.

于 2012-09-18T11:57:28.017 に答える
0

次のように、トグルする前に「.panel」グループを逆にしてみてください。

$($(".panel").get().reverse()).toggle();

更新:
この解決策は初めて機能しますが、2 回目は失敗するため、有効ではありません。他の回答をご覧ください。

于 2012-09-18T11:14:55.523 に答える