0

div を固定の高さに拡張する簡単な方法を探しています。これは私のコードの基本的なスケルトンになります:

<div class="parent">
    <div class="child">
        Lorem Ipsum
    </div>
    <div class="bar">
        <a class="more" href="#">More</a>
   </div>
</div>

「詳細」をクリックすると、親 div を 400px の高さに拡張します。「もっと」（「より少ない」方が良い）をもう一度クリックすると、親divのサイズが元の高さ（200px）に戻ります。

どういうわけか、インターネットで見つけたものは何も機能しませんでした。そして、私はjQueryの絶対的なグリーンホーンであるため、間違いを見つけることができません...各クラスがWebサイトで数回使用されるため、適切な要素識別の欠如が問題である可能性があると思います...

事前にご協力いただきありがとうございます。

4

3 に答える 3

2

このJSFIDDLEを試してください

html:

   <div class="parent">
    <div class="child">
        Lorem Ipsum
    </div>
    <div class="bar">
        <a class="more" href="#">More</a>
   </div>
</div>

js

    var div = $("div.parent");
$("a.more").click(function(){
    if($(this).text().toLowerCase() == "more"){
        div.animate({height:400}, 500);
        $(this).text("Less");   
    }            
    else{
       div.animate({height:200}, 500);
         $(this).text("More");   
    }

});
于 2013-04-10T19:39:08.640 に答える
0

いくつかの CSS を編集すると、次のようになります。

.parent.large {
    height: 400px;
}

次の JavaScript を使用できます。

var $parent = $('.parent');

var $link = $('.more').click(function(e) {
    e.preventDefault();
    if ($parent.hasClass('large')) {
        $parent.removeClass('large');
        $link.text('More');
    } else {
        $parent.addClass('large');
        $link.text('Less');
    }
});

これが実際のjsfiddleです。

于 2013-04-10T19:42:36.617 に答える