2

私はこのマークアップを持っています：

<div class="myToggledDiv">
    <div>content</div>
</div>

<div style="margin-top: 10px;">
    content
</div>

jQueryを介して、.slideToggleを実行して最上位のdivを表示/非表示にします。

折りたたまれているか展開されているかにかかわらず、2つのdivの間に常に10pxのスペースがあるようにしたいと思います。

ただし、動作は、上部のdivが下にスライドしても、10ピクセルのマージンは残りますが、上部のdivが下にスライドし終わるとすぐに、10ピクセルのマージンが消えます。おそらくマージン崩壊の問題のようです。

私が思いついた解決策はこれです：

<div class="myToggledDiv">
    <div>content</div>
</div>

<div style="font-size: 1px">&nbsp;</div>

<div style="margin-top: 10px;">
    content
</div>

＆nbsp; 2つを「分離」し、10pxのマージンを維持するには、divにコンテンツが必要であるため、が重要です。

.clearfix：afterアプローチも試しましたが、このシナリオでは機能しないため、これはjQuery中心の問題である可能性があります。誰かがこれに遭遇し、余分なdivよりもエレガントな解決策を見つけましたか？

4

2 に答える 2

4

1px信じられないかもしれませんが、親コンテナの上部にパディングを追加するだけです。問題は、slideToggle最初のdivdivがに設定されdisplay:noneているため、2番目のdivが親に対して軽くたたくように設定されていることです。さて、それは単なるCSSのバグです。親アイテムに設定がない場合padding、子アイテムのマージンは親の外側に移動し、両方のアイテムを押し下げます。1px親要素にマージンを適用することにより、をmargin要素内にとどまらせることができます。

<body style="padding-top: 1px">
  <div class="myToggledDiv">
      <div>content</div>
  </div>

  <div style="margin-top: 10px;">
      content
  </div>
</body>

明らかに、これらのインラインスタイルをすべて削除し、必要に応じて個別のスタイルシートとID/クラスを使用する必要があります。

（レイアウトに応じて）余分なパディングをオフセットする必要がある場合は、これを使用できる可能性があります。

{ margin-top: -1px; padding-top: 1px }
于 2010-02-17T20:13:29.167 に答える
3

やや奇妙な回避策ですが、2番目のdivに次のルールを設定できます。

{ position:relative; top:10px; }

オンラインデモ： http： //jsbin.com/enala/edit

また、ダグの回答を検討することをお勧めします。親コンテナにパディングを設定すると望ましくない結果が生じる場合は、代わりにこのソリューションに頼ることができます。

于 2010-02-17T19:50:47.357 に答える