3

レイアウト内の div の 1 つを切り替える JQuery 関数があります。問題は、div が表示または非表示になると、レイアウト全体が画面上で移動することです。レイアウトを変更せずに同じ表示/非表示効果を実現する方法はありますか?

<script>
  $(document).ready(function(){
    $("button").click(function () {
      $("#layoutDiv").toggle();
    });
  });
</script>
4

3 に答える 3

9

適切な幅/高さを維持する別の div でその div をラップして、レイアウトの一貫性を保つことができます。

<div style="width:300px;height:200px">
  <div class="animateMe">
    <p>When I close, the outer div will still be there.</p>
  </div>
</div>

事前に高さ/幅がわからない場合は、ページの読み込み時に javascript を使用してプログラムで設定できます。折りたたみ可能な div の .width() と .height() の値を取得し、それらを外側の div の css に適用するだけです。

于 2009-07-07T18:32:01.133 に答える
4

可視性を使用する新しい関数を書いてみてください：表示の代わりに非表示：なし。これにより、divを表示せずにCSSボックス（およびレイアウト）が維持されます。

于 2009-07-07T18:33:56.900 に答える
0

ジョナサン・サンプソンの答えは機能します-代わりに、あなたが何をしているのか(マークアップと必要な効果)を正確に知らなくても、ドキュメントフローから除外する高いz-indexで絶対配置を使用します。これは、モーダル ウィンドウ / ライトボックスが一般的に使用するものです。ここにチュートリアルがあります。

于 2009-07-07T18:43:45.353 に答える