-3

ボタンをクリックしてセクションの高さを 300px 増やしたい場合はどうすればよいですか。このボタンをもう一度クリックすると、高さが元の高さに戻ります。

これはボタンの私のコードです

<div id="section">
   <button id="btn1">expand</button>
   <button id="btn2">expand2</button>
   <button id="btn3">expand3</button>
</div>

div内に3つのボタンがあります。各ボタンをクリックすると、セクションの高さが 300px ずつ増加し、同じボタンをもう一度クリックすると、高さが元の高さに減少します。これを機能させるためにjQueryで何ができますか。

4

4 に答える 4

1 
$("#section button").click(function(){
    if (typeof($(this).data('expanded')) === "undefined" || $(this).data('expanded') == "0") {
        $("#section").height($("#section").height()+300);
        $(this).data('expanded', "1");
    } else {
        $("#section").height($("#section").height()-300);     
        $(this).data('expanded', "0");
}
});

フィドル: http://jsfiddle.net/sSGty/2/

于 2013-09-12T13:16:20.330 に答える
1

あなたはこれを行うことができます：

$('button').live('click', function() {

    if ($(this).hasClass('big')) {
        $(this).removeClass('big');
        $(this).height(originalHeight);
    } else {
        originalHeight = $(this).height();
        $(this).addClass('big');
        $(this).height(originalHeight+300);
    }
})
于 2013-09-12T13:32:15.610 に答える
0

btnクラスをボタンに適用し、クリック イベントを使用します.btn。高さがあるかどうかを確認し、それ以外の場合は高さを削除300pxしheightますsection300px

$('.btn').click(function(){
    var h = parseInt($('#section').css('height'), 10);
    if(h != 300)
    {
        $('#section').css('height', '300px');
    }
    else
    {
        $('#section').css('height', '');
    }
});

HTML

<div id="section">
   <button id="btn1" class="btn">expand</button>
   <button id="btn2" class="btn">expand2</button>
   <button id="btn3" class="btn">expand3</button>
</div>

フィドル

于 2013-09-12T13:21:39.097 に答える