1

古き良き「ドロップダウン」効果を与えるためslideToggleに、jQueryを使用しました。<div>

クロームで思い通りに動作させました。それからIEで試してみたところ、かなり奇妙なことに出くわしました。アニメーションは見事に見え、<div>完全な高さまで拡大しましたが、アニメーションが終了する<div>と消えますか？

私はそれをやめるためにいくつかの異なることを試みました、そしてそれは<div>any min-height（私はそれに1pxを与えました）を与えることはそれが働くことを可能にすることがわかりました。

min-heightこの関数を正しく機能させるためにIEでを指定する必要がある理由を本当に知りたいですか？そこにあるのは大したことではありませんが、なぜそこにある必要があるのか​​は理解したいと思います。以下のコード。

HTML構造

<div class="home_popConfiCont rbAll">
<div class="home_popConfiHead">Your Confidential Details<div class="arrow-up"></div></div>
<div class="home_popConfiBody">
    Lots and lots of text
</div>
</div>

jQuery

$(function(){
    var confOpen = 0;
    $(".home_popConfiHead").click(function(){
        if(confOpen){
            $(".arrow-up").attr("class","arrow-up");
            $(".home_popConfiBody").stop(true, true).slideToggle(100);
            confOpen = 0;
        }
        else{
            $(".arrow-up").attr("class","arrow-up arrow-down");
            $(".home_popConfiBody").stop(true, true).slideToggle(100);
            confOpen = 1;
        }
    });
});

上記に適用されるCSS <div>：

.home_popConfiBody{padding:5px 5px 0 5px; display:none;line-height:20px;min-height:1px;}
4

1 に答える 1

1

おそらく「hasLayout」の問題が発生しています。

http://reference.sitepoint.com/css/haslayout

divにレイアウトを与えることができるものはたくさんありますが、そのうちの1つであるmin-heightを発見しました。min-heightに加えて、次の値を使用することもできます（参照記事から取得）。

  • 表示：インラインブロック
  • 高さ:(自動以外の任意の値）
  • フロート:(左または右）
  • 位置：絶対
  • 幅:(自動以外の任意の値）
  • 書き込みモード：tb-rl
  • ズーム:(通常以外の任意の値）4
  • 最小の高さ:(任意の値）
  • max-height :(なしを除く任意の値）
  • 最小幅:(任意の値）
  • max-width :(なし以外の任意の値）
  • オーバーフロー:(表示以外の任意の値）
  • オーバーフロー-x:(表示以外の任意の値）
  • オーバーフロー-y:(表示以外の任意の値）5
  • 位置：固定

ページのコンテンツに目立った目に見える影響がないため、一般的にズーム：1を使用してレイアウトをトリガーすると思います。

切り替えているdivの内部に要素がフロートしている場合は、通常、オーバーフローを適用します。divに これにより、divが内部のフロート要素の高さまで拡張されます。

于 2012-12-11T15:02:43.443 に答える