1

アプリにサイドバーがあり、トグル ボタンで表示/非表示を切り替えることができます。コンテンツ領域に余白を追加し、サイドバーを非表示/表示する「本文」のクラスを切り替えるだけです。問題は、これが切り替えられたときに、コンテンツ領域がその子コンテンツのサイズを変更していないことです。ブラウザーのサイズを調整すると、コンテンツ領域がコンテンツに合わせて調整されますが、トグル後にウィンドウのサイズを変更せずにこれを行う必要があります。この問題を解決するために要素サイズの更新または dom の更新をトリガーする方法はありますか? Chrome 19.x を使用しています。

 $('#sidebar-toggle').click(function(event) {
   event.preventDefault();
   $('body').toggleClass('with-sidebar-left');
 });

編集: Webkit の問題のようです。Firefox では問題なく動作します。

編集 2:次の場所に簡易ビルドをセットアップします。

https://dl.dropbox.com/u/189605/misc/build-test/grid.html

ボックスが float: left であることがわかります。小さな矢印ボタンを使用してサイドバーを最小化すると、より多くのボックスが収まるように右が調整されます。Webkit では、ブラウザのサイズを変更して、より多くのスペースがあることを認識する必要があります。Firefox で動作します。

4

3 に答える 3

7

クリックハンドラーでサイズ変更をトリガーできます。例：

$(window).trigger('resize')
于 2012-06-12T21:48:42.307 に答える
2

ここでの私の回答の回避策は、あなたの状況に適しています。

ここに簡単なデモがあります: http://jsbin.com/amakex

Chrome と Safari の両方で動作します (当然のことながら、元のデモも Safari では動作しませんでした)。

于 2012-06-13T00:23:13.667 に答える
1

あなたは言った-「しかし、トグルの後にウィンドウのサイズを変更する必要なしにこれを行う必要があります」.jqueryコールバックを使用してそれを行うことができます

于 2012-06-12T22:02:48.103 に答える