1

私は例を作りました：http：//jsfiddle.net/YfV7G/4/

このようなdivです

<div id="container">
    <h2>The header</h2>
    <a href="#">One of dynamic ammount of links</a>
    <a href="#">One of dynamic ammount of links</a>
    <a href="#">One of dynamic ammount of links</a>
    <a href="#">One of dynamic ammount of links</a>
    <a href="#">One of dynamic ammount of links</a>
</div>

私が高さを変更すること：

$('#container').animate({
    height: '5px'
}, 1000, null);​

Cssはoverflow:hidden

高さを変更して、divの最上部のみを表示します。

しかし、それを取り戻して完全なコンテンツを表示するには、高さを何に設定する必要がありますか？

私が自分で考えることができる1つの方法は、小さくする前に保存することです。別のオプションはありますか？（高さが保存された後にコンテンツが変更された場合、そのようになります）

4

4 に答える 4

2

の値autoを使用します。height

$('#container').height( 'auto' );
于 2012-12-22T11:52:17.347 に答える
2

slideUp()jQueryを使用slideDown() して「手動」で行うのではなく、同じ効果を得る方法を1つ見つけました。

次に、次のようになります: http://jsfiddle.net/YfV7G/9/

于 2012-12-22T11:56:22.730 に答える
1

初期の高さを rel 属性に保存し、後で取得できます。このようなもの：

var container = $("#container");

container.attr('rel', container.height()).animate({
    height: '40px'
}, 1000, null);

container.hover(
  function() {
    $(this).height(container.attr('rel'));
  },
  function() {
    $(this).animate({
      height: '40px'
    }, 1000, null);
  }
);

例: http://jsfiddle.net/kvZ26/

編集:
これは、動的に生成されたコンテンツで機能する更新された回答です。.outerHeight()スタイリングによっては、値を取得するときに使用する必要がある場合があります。

var container = $("#container");

container.attr('rel', container.height()).animate({
    height: '40px'
}, 1000, null);

container.hover(
  function() {
    var height = $("#container > h2").height() + ($("#container > a").height() * $("#container > a").length);
    $(this).height(height);
  },
  function() {
    $(this).animate({
      height: '40px'
    }, 1000, null);
  }
);

(コンテナ ID を複製する必要がないように調整することもできます)。

例: http://jsfiddle.net/xDCsY/1/

于 2012-12-23T05:58:10.617 に答える
-1 
height:initial
overflow: visible

upd: 例に「表示」ボタンを追加します。http://jsfiddle.net/YfV7G/6/

于 2012-12-22T11:51:31.440 に答える