0

いくつかのdivボックス（カテゴリリスト）のそれぞれにテキストの行をロードしています。ロード時に3つしか表示されないようにする必要があります。そこで、高さを制限し、overflow：hiddenを設定しました。それを実現するためのcss。ボックスの横に小さなボタン（画像がdivに読み込まれています）があり、ボックスの高さを増減できます。問題は、このアイテムが正しく機能しないことです。コードは次のとおりです（他の無関係なHTML / CSS / jQueryコードは残しておきます）。

HTML（ページ内のボックスの1つ）：

<div class="content" style="height:50px;overflow:hidden;">
    <div>Category 1</div>
    <div>Category 2</div>
    <div>Category 3</div>
    <div>Category 4</div>
    <div>Category 5</div>
    <div>Category 6</div>
</div>
<div class="see-more"></div>

jQuery：

jQuery(document).ready(function() {
    jQuery(".see-more").click(function() {
        jQuery(this).prev("div.content").height(200);
    });
});

jQueryコードに問題があるようです。また、静的な200の値ではなく、ボックスに正確な高さを設定するために、（オーバーフローのために）非表示のコンテンツの実際の高さを見つける方法を知る必要があります。

4

2 に答える 2

2

コンテナの場合はscrollHeightプロパティを使用して実際の高さを取得できます。また、アニメーションを実行したくない場合は、非表示のオーバーフローを削除することもできます。このフィドルは、高さの解決策を示しています。

jQuery(document).ready(function() {
    jQuery(".see-more").click(function() {
        var box = jQuery(this).prev("div.content"),
            height = box[0].scrollHeight;
        box.height(height);
    });
});​
于 2012-12-24T08:27:20.843 に答える
2

内側のアイテムをラップし、そのコンテナの高さを使用してアイテムの最大高さを決定できます。あなたは段階的に高さを増やすためにいくつかの計算をすることができます...以下は完全な高さを設定します

$(function(){
    $('.content').wrapInner('<div class="inner">');  

    $(".see-more").click(function() {
        var $cont=$(this).prev()
        var maxHeight = $cont.find('.inner').height();
        $cont.height(maxHeight);
    });
 });

デモ：http：//jsfiddle.net/nq2Em/1/

于 2012-12-24T08:33:51.130 に答える