2

スライドダウンしているオブジェクトのコンテンツがフローティングされている場合、jQuery slideDown に問題があります。

何が起こるかというと、div がコンテンツの高さをはるかに超えてスライドし、適切な高さに「スナップ」します。

内部のコンテンツが浮かんでいない場合の高さに基づいて、divが下にスライドしていると思います（単なる理論です）。たとえば、フロート アイテムが 4 つある場合、div は、フロート アイテムが 2 つある場合よりも 2 倍拡大するように見えます。

clearfix ハックで浮動小数点数を含めても、何も修正されないようです。

私が過去に使用した解決策 (および推奨される解決策) は、アイテムを非表示にする前に、CSS を介してアイテムの高さを設定することです。そうすれば、スライドダウンはどこまで進むべきかを知っています。

問題は、スライドダウンを使用するパネルをネストしていることです。親の高さは、ネストされた非表示のパネルが既に展開されていることに基づいて計算されるため、事前に設定することはできません。

すべてのトグル パネルを設定する関数を再帰的に呼び出すことができます...最も内側のネストされたパネルを見つけ、高さを設定し、デフォルトで非表示にするパネルを折りたたんでから、階層を上に移動します。しかし、それは非常に多くのトラバースを行う必要があるため、パフォーマンス ヒットになります。

高さを手動で設定する DOM を最初にトラバースすることなく、事前に CSS を介して高さを修正せずに、フローティング コンテンツのこの slideDown を修正する方法を知っている人はいますか?

アップデート：

サンプルコードは次のとおりです。

http://jsbin.com/ajoka/10/

（ページをクリックするとスライドして表示されます）

これは私が使用している正確なスタイルに基づいており、その特定の組み合わせで問題が発生します。slideDown に設定されている DIV の背景がピンク色であることに注意してください。内容物よりも遠くに滑り落ち、すぐに適切な場所に戻ります。

4

4 に答える 4

1

解決済み:

あなたから削除margin-bottom:10px;します

  .itemsWrapper {
    margin-bottom:10px;
    overflow:auto;
    width:100%;
    background: green;
  }

http://jsbin.com/ajoka/11

于 2010-06-19T02:37:41.970 に答える
1

問題を再現できません。いくつかのコードを提供してください。これは期待どおりに機能します。

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en-us" xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>Test</title>
  <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
  <script src="assets/js/jquery-1.4.1.min.js" type="text/javascript"></script>
  <script src="assets/js/application.js" type="text/javascript"></script>
</head>
<body>
  <div id="test">
    <div>test</div>
    <div>test</div>
    <div>test</div>
    <div>test</div>
  </div>
</body>
</html>

CSS

#test div { width: 200px; height: 200px; float: left; outline: 1px solid #000; }

JS

$(function(){
  $('#test').hide();
  $(window).click(function(){
    $('#test').slideDown();
  });
});
于 2010-06-18T17:36:07.317 に答える
0

私も同じ問題に直面していました。2 つのファイルには同じ HTML コードが含まれていますが、そのうちの 1 つはこの問題を示していました。解決策として、jQueryでスライドしていたdivの高さを計算しました:

var somevar=$('#contentBody').outerHeight();

次に、それを変数に格納し、slideDown 効果を適用する前にその div を再度適用しました。

$('#contentBody').height(somevar);

このトリックは問題を解決しました。

于 2012-10-17T19:55:46.927 に答える
0

私はちょうど同じ問題に出くわしました.この投稿を読んでいるときに、何年も前にすでにこの問題を抱えていたことを突然思い出しました.

これは、最適ではありませんが、ほとんどの状況で仕事を成し遂げる解決策です。

padding-bottom: 1px;ラッパーに追加します。私の場合、ラッパーはアニメーション化された div の親です。

それが役立つことを願っています。

于 2011-10-22T10:04:31.967 に答える