0

ここにテストケースがあります：

http://www.jsfiddle.net/kPBbb/

コンテンツが. .content_ .wrapper_ 初期サイズを維持しながら、アニメーションの後も がそこにあるかのように動作するようにしたいと思います。.contentdisplay: none.wrapper.content

.wrapper問題を表示するために（シュリンクラップ動作を強制することにより）編集されましたfloat: leftが、常にそうであるとは限らないため、アニメーションの前にボックスの幅を読み取って再適用する必要のない解決策が必要です後。

簡単な修正はありますか？

4

4 に答える 4

1

または、動的にするには、次のことを試してください。

var contentWidth = $('.content').width();

$('.header').width(contentWidth);
于 2010-07-21T18:43:50.307 に答える
0

ラッパーの幅を指定すると、その子をスライドさせても同じサイズのままになります。

.wrapper{
    width: 200px;
}

この問題に対するより良い/より一般的な解決策があるかどうかはわかりません。

于 2010-07-21T18:41:56.953 に答える
0

display:none を使用する代わりに、 を使用して情報を表示できvisibility:hiddenますvisibility:visible。

display:none

これは、データがページ上にないかのように動作します。これが、表示プロパティが変更されるとラッパーが縮小する理由です。none

visibility:hidden

可視性により、データはページ上の所定の場所に保存されますが、単に非表示になります。

これを試して、これがあなたの質問に役立つかどうかを確認してください。

于 2010-07-21T18:43:15.277 に答える
0

私は個人的にこれを行います：

$('.wrapper').each(function() {
  var wrapper = this;
  $('.header', wrapper).click(function() {
    $(this).css('width',$(this).width());
    $('.content', wrapper).slideToggle();
  });
});​

しかし、これを行うこともできます：

$('.wrapper').each(function() {
    var wrapper = this;
    $('.header', wrapper).click(function() {
        $('.content', wrapper).slideToggle('slow',function(){
            $('.content', wrapper).show();
            $('.content', wrapper).css('visibility','hidden');
            $('.content', wrapper).css('height','0px');
        });
    });
});

</p>

于 2010-07-21T18:55:09.920 に答える