0

私はブートストラップ行を使用しており、応答性を維持しながら、適切なグリッドを機能させるのに役立つことがわかったため、必要なスパンの子をより多く与えています。

各要素には子があり、次のように jQuery を使用して表示される要素があります。

<div class="row">

<div class="span2">
    <div class="inner-element">
         Content here
         <div class="hidden-element">
               More content here
         </div>
    </div>
</div>
...

</div>

内部の特定のボタン.span2がクリックされると、.hidden-elementdiv が成長しslideDown();、内部要素がposition:absoluteCSS を取得するため、下にあるスパンを超えてグリッドを変更しません。

.rowこの設定は、ページの右端 (の隅)にない .span2 要素で実行すると、完全に正常に機能します。

このjsFiddle の例でこの問題を確認できます。「例 #1」をクリックすると、親要素が折りたたまれずに正常に動作し、「例 #2」をクリックすると.span2要素が折りたたまれ、次の.span2要素が 1 行上にジャンプすることがわかります。

これの原因は何ですか?どうすれば解決できますか?

4

1 に答える 1

1

どうやら問題は、.span2要素のheight属性の崩壊にあるようです。この jsFiddle の例に示すように、アニメーションの前に JavaScript を介して総合的に高さを設定するとうまくいきます。したがって、アニメーションを行う正しい方法は次のとおりです。

var box = item.closest('.span2');

オープン時:

box.css("height", box.height()+"px");

終了時:

box.css("height", "auto");

これにより、親要素の高さが固定され、折りたたまれなくなります。

于 2013-04-17T15:44:14.173 に答える